1 浮動

浮動是讓元素脫離文檔流，浮動前后的非定位元素會無視浮動元素，可能沿著元素另一側垂直流動。

浮動元素會生成一個塊級框，具有塊級元素的特性，但是不占整行。

浮動元素脫離了文檔流，無法為文檔流中的父元素撐起高度，造成父盒子塌陷的問題。

2 清除浮動

clear:left左側不允許浮動元素

clear:right右側不允許浮動元素

clear:both兩側不允許浮動元素

3 清除浮動的技巧

添加一個空的div + clear:both清除浮動，添加了無意義的html代碼

給父元素添加overflow:hidden，父元素本身形成一個BFC，BFC可以包裹浮動流，BFC中浮動元素的高度也被計算在內，可以實現清除浮動，但是無法顯示溢出的元素。

給父元素設置偽元素清除.clearfix::after {content: '';display: block;clear: both;height: 0;visibility: hidden; } .clearfix{*zoom: 1 /*兼容IE 會觸發haslayout*/ /*haslayout是IE瀏覽器引擎的一個組成部分，在IE中，一個元素要么根據自身內容進行布局，要么根據父元素進行布局。haslayout=“true”，元素會根據自身的內容去調整大小，而非依賴父元素去渲染自己。haslayout = “false”，該元素會依賴于父元素渲染自己。*/ }

總結

以上是生活随笔為你收集整理的【HTML/CSS】浮动模型和清除浮动的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。