子元素浮動后父元素的變化
黑色盒子與綠色盒子都設(shè)置了浮動后，那其父元素為什么會受到了影響？還有那個紫色盒子的是不是為父元素？
街角瘋
2017-02-23
1 回答
舉報
0/150
提交
取消
2017-02-23
clear:both只能清除相鄰元素（這里特指緊隨浮動元素其后的元素）受到的浮動影響；
父級元素收到浮動影響時使用{width：100%；overflow:hidden;}才能清除父級元素受到的浮動影響
2017-02-23
overflow:hidden 的意思是超出的部分要裁切隱藏掉。那么如果 float 的元素不占普通流位置。
普通流的包含塊要根據(jù)內(nèi)容高度裁切隱藏，如果高度是默認(rèn)值auto，那么不計(jì)算其內(nèi)浮動元素高度就裁切就有可能會裁掉float。所以如果沒有明確設(shè)定容器高情況下它要計(jì)算內(nèi)容全部高度才能確定在什么位置，hidden浮動的高度就要被計(jì)算進(jìn)去順帶達(dá)成了清理浮動的目標(biāo)。
也可以不設(shè)置寬度，要設(shè)置具體的寬度必須讓寬度能夠包裹住浮動起來的子元素，就是比這兩個子元素寬（如果兩個子元素之間設(shè)有margin值或由邊框也需要把這些考慮進(jìn)去 。所以說設(shè)為100%方便許多）