一，為什麼要清除浮動
doctype html由於div2設定了float:left使其脫離文件流，沒有形成div1包裹div2的效果>
<
html
>
<
head
lang
="en"
>
<
meta
charset
="utf-8"
>
<
title
>clearfix
title
>
<
style
>
div
.div1
.div2
style
>
head
>
<
body
>
<
div
class
="div1"
>
<
div
class
="div2"
>
div>
div>
bodhtml>
二 如何清除浮動
1.解決這個bug的方法有很多，比較簡單的做法如下**，
<插入乙個"空白"div，設定起clear：both清除浮動，clear屬性的原理是為元素新增足夠多的外邊距，使其垂直下降到 浮動框的下面。但是這中做法的缺點就是新增了無用的標籤，使html不能符合語義規範。div
class
="div1"
>
<
div
class
="div2"
>
div>
<
div
style
="clear: both;"
>
div>
div>
2.當前流行的乙個做法是利用偽類：before和：after，**如下，
.clearfix新增消除浮動的類.clearfix後能正常顯示div。注，zoom：1是相容ie7。.clearfix:after, .clearfix:before
<
div
class
="div1 clearfix"
>
<
div
class
="div2"
>
div>
div>
3.還有一種方法是給外層父級div設定屬性overflow：hidden。
.div1三，關於clear的另乙個用途：實現垂直布局.div2
要實現如圖所示的布局，左側的2個div浮動到父級div左側
可以利用左側第二個div的clear：left來實現，這樣，內部div和文字就是同意級別，而不用將左側的2個div包裹起來。
關於清除浮動
一 為什麼要浮動 我個人認為是為了頁面的美觀，方便布局，但是浮動是把雙刃劍，有利也有弊 二 什麼時候需要清除浮動 很多種原因。1.如果父元素沒有設定高度，而子級元素設定了浮動，這樣會導致父元素高度的坍塌。2.導致背景不能顯示，如果對父級設定了背景屬性，導致父級不能撐開，會影響到背景不能正常開啟。3....
關於浮動與清除浮動
當給乙個子元素設定浮動屬性時，這個子元素就脫離了文件流，從形式上不再屬於父元素，因此它的父元素的高度就會受到影響，內容不被撐開，為了清除子元素浮動帶來的負面影響，可以有以下方法解決 1,給直接父元素設定inline block或float屬性 不推薦 2,在浮動的子元素後面加上br標籤並設定clea...
關於浮動與清除浮動
當給乙個子元素設定浮動屬性時，這個子元素就脫離了文件流，從形式上不再屬於父元素，因此它的父元素的高度就會受到影響，內容不被撐開，為了清除子元素浮動帶來的負面影響，可以有以下方法解決 1,給直接父元素設定inline block或float屬性 不推薦 2,在浮動的子元素後面加上br標籤並設定clea...