清除左側(cè)浮動?
既然浮動元素脫離于普通文檔流存在
那么就比如視頻中box3與box1 ?box2重疊的時候
如何識別出box1 ?box2 在box3左側(cè)?
如果清楚除浮動的意思是瀏覽器解釋為該側(cè)不存在浮動元素
弱弱的問一句此時是把浮動元素同普通文檔流同樣對待的意思嗎?
既然浮動元素脫離于普通文檔流存在
那么就比如視頻中box3與box1 ?box2重疊的時候
如何識別出box1 ?box2 在box3左側(cè)?
如果清楚除浮動的意思是瀏覽器解釋為該側(cè)不存在浮動元素
弱弱的問一句此時是把浮動元素同普通文檔流同樣對待的意思嗎?
2016-10-22
舉報
2016-12-29
盡管問題提出好久了,還是說下我的一點淺見吧,開始我也想著是瀏覽器會找出某元素左邊的元素,然后處理下。不過后來自己試了下,覺得這個clear:left ,在此處并不是識別出位于某元素左側(cè)的元素,并清除浮動效果的意思。
我的理解是,某元素設(shè)置clear:left屬性,則對于該元素而言,此前設(shè)置了?float:left??的元素都可以視為“普通文檔流”層,這樣的話新的樣式就在之前設(shè)置了float:left的元素下一行開始了。那么clear:left =?“忽略之前左側(cè)浮動元素“實現(xiàn)的效果,把他們視作普通文檔流實現(xiàn)的。
貌似樣式和文檔是是分離的,舉個例子,題主截圖例子中,假設(shè)div3中有文字(文字們本來位于div的左上角),如果div3不設(shè)置clear:left ,那么樣式會像上圖一樣顯示(重疊),但是div3中的文字則不然,文字此時不會在div的左上角。這時,當設(shè)置了所謂“忽略左側(cè)浮動元素“效果clear:left 后,把之前元素的效果都當做是普通文檔流的效果,這樣樣式會另起一行,而文字也會顯示正常了。
同理,為什么clear屬性還有一個right,一樣的,也不是根據(jù)位置來分的,那就是”忽略右側(cè)浮動元素效果”,即,對于設(shè)置clear:"rught”的當前元素而言,所有的右側(cè)浮動效果(float:right),都視作普通文檔流實現(xiàn),所謂忽略浮動。
2016-10-22
是把浮動元素看做是普通文檔流