1 浮動(dòng)

浮動(dòng)是讓元素脫離文檔流，浮動(dòng)前后的非定位元素會(huì)無(wú)視浮動(dòng)元素，可能沿著元素另一側(cè)垂直流動(dòng)。

浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，具有塊級(jí)元素的特性，但是不占整行。

浮動(dòng)元素脫離了文檔流，無(wú)法為文檔流中的父元素?fù)纹鸶叨?#xff0c;造成父盒子塌陷的問題。

2 清除浮動(dòng)

clear:left左側(cè)不允許浮動(dòng)元素

clear:right右側(cè)不允許浮動(dòng)元素

clear:both兩側(cè)不允許浮動(dòng)元素

3 清除浮動(dòng)的技巧

添加一個(gè)空的div + clear:both清除浮動(dòng)，添加了無(wú)意義的html代碼

給父元素添加overflow:hidden，父元素本身形成一個(gè)BFC，BFC可以包裹浮動(dòng)流，BFC中浮動(dòng)元素的高度也被計(jì)算在內(nèi)，可以實(shí)現(xiàn)清除浮動(dòng)，但是無(wú)法顯示溢出的元素。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。