我們在使用float浮動進行布局的時候知道一般需要給浮動的塊元素加上乙個父級元素，這樣元素浮動時才可以在父元素內部按照我們需要的方式進行布局，但是有乙個問題是如果父元素沒有給定高度的話當內部元素進行浮動之後父元素的高度就會是0，這是因為浮動的元素是處於標準流之外的。若是在一開始給定父元素乙個高度的話很多時候也不能滿足要求，因為很多我們不知道要顯示的內容具體是多少，所以也就不知道需要給多少高度合適。
對於該問題的解決方式有三種：
在父元素內部浮動元素後面加上乙個塊級元素，一般是使用div，給該div乙個clear屬性為both即可。
lang
="en"
>
>
charset
="utf-8"
>
>
documenttitle
>
>
.header
.one
.two
.footer
.clear
style
>
head
>
>
class
="header"
>
class
="one"
>
onediv
>
class
="two"
>
twodiv
>
//該元素用於解決子元素浮動後父元素的高度為零的情形，注意上面的clear樣式
class
="clear"
>
div>
div>
class
="footer"
>
footerdiv
>
body
>
html
>
.header
依然是上面的案例，所不同的只是在父元素中新增了乙個clearfix類而已，而清楚浮動的樣式可以說是固定的寫法，就是使用.clearfix:after{},這裡面就是使用到了after偽元素
lang
="en"
>
>
charset
="utf-8"
>
>
documenttitle
>
>
.clearfix:after
.clearfix
.header
.one
.two
.footer
style
>
head
>
>
class
="header clearfix"
>
class
="one"
>
onediv
>
class
="two"
>
twodiv
>
div>
class
="footer"
>
footerdiv
>
body
>
html
>
CSS 清除浮動的N種方式
清除浮動主要是為了解決，父元素因為子級元素浮動引起的內部高度為0的問題。舉個例子 class content class incont div div content incont 此時元素是這樣的 如果我們讓其中的子元素浮動，那麼就會變成下面這樣，我們會發現父元素的內容區的高度不見了 接下來我們要...
css 清除浮動的4種方式
浮動布局和定位布局為css中布局的常用的兩種布局方式，而且相容性會比較好。隨著flex的流行，以後會是主流，新的東西好用，相容不太好。ie10以下不相容flex布局。float布局會脫離文件流，對頁面的布局造成影響，比如造成父級的高度坍塌等問題。清除浮動後，便不會影響文件流。下面介紹一下現在清除浮動...
CSS 清除浮動的五種方式
清除浮動是一件功德無量的事情23333 這裡記錄一下清除浮動的多種方式 首先要明確的是，為什麼要清除浮動？a 影響其他元素定位 父盒子高度為0，子盒子全部浮動 定位，子盒子不會撐開父盒子，下面的元素會到子盒子的下面 b 背景或顏色不能正常顯示 由於浮動產生，如果對父級設定了css背景顏色或css背景...