css清除浮動態float
#1.分析HTML程式碼
1 2 3 4 5 | <div class = "outer" >
<div class = "div1" >1</div>
<div class = "div2" >2</div>
<div class = "div3" >3</div>
</div>
|
登入後複製
分析css程式碼樣式
1 | .outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}.div1{width: 80px;height: 80px;background: red;float: left;}.div2{width: 80px;height: 80px;background: blue;float: left;}.div3{width: 80px;height: 80px;background: sienna;float: left;}
|
登入後複製
##分析問題:外層未設定高度,如果裡面元素不設定float的話,外層容器的高度會隨內層元素高度撐開,因為設定float之後內層元素脫離文件流,導致高度無法撐開
(1)背景無法顯示 (2)邊框無法撐開 (3)margin設定值無法正確顯示
##2.清除浮動
方法一:新增元素 應用clear:both
html:#
1 | 1 <div class = "outer" >2 <div class = "div1" >1</div>3 <div class = "div2" >2</div>4 <div class = "div3" >3</div>5 <div class = "clear" ></div>6 </div>
|
登入後複製
css:

#
方法二:父級div定義overflow:auto
# html:
1 | <div class = "outer over-flow" >
|
登入後複製
#css:
1 | .over-flow{overflow: auto; zoom: 1;
|
登入後複製
原理:使用overflow屬性來清除浮動有一點要注意,overflow屬性共有三個屬性值:hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動,但切記不能使用visible值,如果使用這個值將無法達到清除浮動效果,其他兩個值都可以.
方法三:after方法(作用於浮動元素的父親)
先說原理:這個方法清除浮動是現在網路上最拉風的一種清除浮動,他就是利用:after和:before來在元素內部插入兩個元素塊,從而達到清除浮動的效果。其實作原理類似clear:both方法,只是差別在於:clear在html插入一個div.clear標籤,而outer利用其偽類clear:after在元素內部增加一個類似div.clear的效果。下面來看看其特定的使用方法:
1 | .outer {zoom:1;} .outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
|
登入後複製
其中clear:both;指清除所有浮動;content: '.'; display:block;對於FF/chrome/opera/IE8不能缺少,其中content()可以取值也可以為空。 visibility:hidden;的作用是允許瀏覽器渲染它,但不要顯示出來,這樣才能實現清楚浮動。