一天搞定CSS： 清除浮动（float）--13
生活随笔
收集整理的這篇文章主要介紹了
一天搞定CSS： 清除浮动（float）--13
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
上一節(jié)已經(jīng)說明了為什么要清除浮動了。這里我們就來解決浮動產(chǎn)生的各種問題。
為什么要清楚浮動？
地址：http://blog.csdn.net/baidu_37107022/article/details/71554283
1.清除浮動方法概覽
2.clear方法
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>div{width: 100px;height: 200px;background: red;}/*1.left 元素的左邊不能有浮動的元素*//*.div1{float: left;}.div2{clear: left;}*//*2.right 元素的右邊不能有浮動的元素*//*.div1{float: right;}.div2{clear: right;}*//*3.both 元素的兩都不能有浮動的元素*/.div1{float: left;}.div2{float: right;}.div3{clear: both;}</style></head><body><!--clear 元素的某個方向上不能有浮動的元素left 元素的左邊不能有浮動的元素right 元素的右邊不能有浮動的元素both 元素的兩都不能有浮動的元素--><div class="div1">kaivon1</div><div class="div2">kaivon2</div><div class="div3">kaivon3</div></body> </html>效果圖
清除浮動前：div3鉆到了div1下面
清除浮動后：
3.方法2–6的
代碼演示：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>.parent{border: 1px solid #f00;/*2、給父級添加高度：沒有從根本上解決浮動的問題*//*height: 100px;*//*3、inline-block*//*display: inline-block;margin: 0 auto;*//*4、overflow:hidden;*//*overflow: hidden;*/}.box{width: 100px;height: 100px;background: green;float: left;}</style></head><body><!--清除浮動的方法1、clear2、給父級添加高度有的時候是不能給父級添加高度的，所以這個方法就用不了（父級沒有高度的情況下）3、inline-block具有與上一個的清除浮動一樣的總是，同時加了以后這個元素就沒有辦法居中了4、overflow:hidden;如果子級有定位的話，并且這個定位超出了父級的范圍，那樣的話就看不到了，所以不能加這個命令5、空標(biāo)簽空標(biāo)簽是沒有內(nèi)容，但是它的作用是用來清除浮動的，所以不符合行為、樣式、結(jié)構(gòu)相分離的標(biāo)準(zhǔn)ie6下標(biāo)簽是有一個最小高度19px，解決后也會有2像素的偏差6、br清除浮動與上面的問題是一樣7、after偽類清除浮動（現(xiàn)在最主流的方法）--><div class="parent"><div class="box"></div><!--5、空標(biāo)簽--><!--<div style="clear: both;"></div>--><!--6、br清除浮動--> <br clear="all" /></div></body> </html>效果圖
清除浮動前：
清除浮動后：
4.after偽類清除浮動（現(xiàn)在最主流的方法）
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>.parent{border: 1px solid #f00;}.box{width: 100px;height: 100px;background: green;float: left;color: #fff;}/** 7、after偽類清除浮動（現(xiàn)在最主流的方法）* * .box:after{content: '這是偽類生成的內(nèi)容';}*/.clearfix{*zoom:1;}.clearfix:after{content: '';display: block;clear: both;}</style></head><body><!--清除浮動的方法1、clear2、給父級添加高度有的時候是不能給父級添加高度的，所以這個方法就用不了（父級沒有高度的情況下）3、inline-block具胡與上一個的清除浮動一樣的總是，同時加了以后這個元素就沒有辦法居中了4、overflow:hidden;如果子級有定位的話，并且這個定位超出了父級的范圍，那樣的話就看不到了，所以不能加這個命令5、空標(biāo)簽空標(biāo)簽是沒有內(nèi)容，但是它的作用是用來清除浮動的，所以不符合行為、樣式、結(jié)構(gòu)相分離的標(biāo)準(zhǔn)ie6下標(biāo)簽是有一個最小高度19px，解決后也會有2像素的偏差6、br清除浮動與上面的問題是一樣7、after偽類清除浮動（現(xiàn)在最主流的方法）after 代表選擇到的元素的內(nèi)容的最后面after偽類的內(nèi)容默認(rèn)是一個行內(nèi)元素content 設(shè)置的內(nèi)容--><div class="parent clearfix"><div class="box"></div></div></body> </html>效果圖同上（第3點(diǎn)）
總結(jié)
以上是生活随笔為你收集整理的一天搞定CSS： 清除浮动（float）--13的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一天搞定CSS： 浮动（float）的副
- 下一篇： 一天搞定CSS： overflow--1