清除浮動的幾種方式，清除浮動幾種方式

清除浮動的幾種方式，清除浮動幾種方式

不清除浮動會怎樣？

（1）：背景不能顯示

（2）：邊框不能撐開

（3）：margin 設定值不能正確顯示

（4）：下方內容往上移蓋住浮動地區的內容

 

html代碼：

<div class="container">    <div class="fl"></div>    <div class="fr"></div></div><style>    .fl{float:left;}    .fr{float:right;}</style>

 

 

方式一：

在.container下，最後再加一個div如下：

<div style="clear: both;height: 0; line-height: 0; font-size: 0"></div>

 

方式二：

給父元素.container添加樣式：

.container{    overflow: auto;    zoom: 1;}

 

方式三：

偽類清除浮動：after:

.container:after{    content:'';    display: block;    clear: both;    height:0;    width:100%;    visibility: hidden;}.container{　　zoom:1;//為了相容IE}

 

 

方法四：

雙偽類清除浮動：

.container:before,.container:after {    content: "";    display: block;    clear: both;}.container{    zoom: 1;}

 

方式五：

展現為表格，需設定寬度：

.container{    width:100%;    display:table;}

 

方式六：

展現為內聯塊狀，需設定寬度：

.container{    width:100%;    display:inline-block;} 

 

方式七：

超出隱藏，不推薦使用

.container{    overflow:hidden;}

 

方式八：

給父元素定義高度，不推薦使用

.container{    height:50px;}