父級元素與子集元素浮動影響的解決

<

style
>
.box
.box1
.box2
style
>
<
body
>
<
div 
class
="box"
>
<
div 
class
="box1"
>div1
div>
<
div 
class
="box2"
>div2
div>
div>
body
>

將div1和div2進行左浮動，會發現：

父級元素不見了，因為div1和div2脫離了標準流，父級元素麼有框高屬性，沒東西撐開了，所以會受到浮動的影響消失，解決辦法用overflow:hidden或者overflow:auto，個人理解為超出的東西讓它隱藏或者父元素就會擴充套件包含浮動，但是，要記住一點，overflow屬性不是為了清除浮動而定義的，要小心不要覆蓋住內容或者觸發了不需要的滾動條。

<

style
>
.box
.box1
.box2
style
>
<
body
>
<
div 
class
="box"
>
<
div 
class
="box1"
>div1
div>
<
div 
class
="box2"
>div2
div>
div>
body
>

浮動元素撐起父級元素

浮動會使元素脫離文件流，如果不設定父級高度，父級將失去高度，影響頁面布局。這裡總結了一些常用的方法，是父級 有高度 1.設定父級高度 設定乙個合適的高度，這種方法比較適用於元素高度固定的場景。2.設定父級元素 overflow hidden 這種方法比較簡單，但要確保父級元素沒有溢位樣式。3.設定父...

解決子元素設定浮動影響父元素問題

例 lang zh cn charset utf 8 body div0 div2,div3 style head class div0 class div2 div class div3 div div body html 此時父元素div0無法包含子元素，解決辦法 1.給父元素設定overflo...

css 清除子元素浮動帶給父元素帶的影響

css語法 clearfix,wrap content tap wrap tap content ul clearfix after,wrap content tap wrap tap content ul after 運用less語法如下 1.建立乙個less檔案，檔名隨意，寫入下面 clearf...