前端開發(fā)中，我們知道clear屬性有none、both、left和right四個(gè)值。

它們的具體含義如下：

• none：允許兩邊都可以有浮動(dòng)對(duì)象；
• both：不允許有浮動(dòng)對(duì)象;
• left：不允許左邊有浮動(dòng)對(duì)象;
• right：不允許右邊有浮動(dòng)對(duì)象。

這里主要討論both、left和right三個(gè)值。

要用到的CSS代碼如下：

<style type="text/css">.container{margin: 30px auto;width:600px;height: 300px;}.p{border:solid 3px #a33;}.c{width: 100px;height: 100px;background-color: #060;margin: 10px;}.fl{float:left;}.fr{float:right;}.cl{clear:left;}.cr{clear:right;}.both{clear:both;}</style>

?

一、普通浮動(dòng)，無(wú)清除浮動(dòng)，外容器塌陷：

DOM結(jié)構(gòu)：

<div class="container"><div class="p"><div class="c fl"></div><div class="c fl"></div><div class="c fl"></div></div></div>

效果圖：

二、左浮動(dòng)，clear:both清除浮動(dòng)：

DOM結(jié)構(gòu)：

<div class="container"><div class="p"><div class="c fl">float left 1</div><div class="c fl">float left 2</div><div class="c both">clear both</div></div></div>

?

效果圖：

三、右浮動(dòng)，clear:both清除浮動(dòng)：

DOM結(jié)構(gòu)：

<div class="container"><div class="p"><div class="c fr">float right 1</div><div class="c fr">float right 2</div><div class="c both">clear both</div></div></div>

效果圖：

四、左右浮動(dòng)，clear:both清除浮動(dòng)：

DOM結(jié)構(gòu)：

<div class="container"><div class="p"><div class="c fl">float left</div><div class="c fr">float right</div><div class="c both">clear both</div></div></div>

效果圖：

五、左浮動(dòng)，清除左浮動(dòng)，左浮動(dòng)，未清除浮動(dòng)的塌陷：

DOM結(jié)構(gòu)：

<div class="container"><div class="p"><div class="c fl">float left1</div><div class="c cl">clear float left</div><div class="c fl">float left2</div></div></div>

效果圖：

六、右浮動(dòng)，清除右浮動(dòng)，左浮動(dòng)，未清除浮動(dòng)的塌陷：

DOM結(jié)構(gòu)：

<div class="container"><div class="p"><div class="c fr">float right</div><div class="c cr">clear float right</div><div class="c fl">float left</div></div></div>

效果圖：

轉(zhuǎn)載于:https://www.cnblogs.com/aaron-shu/p/4150009.html

總結(jié)

以上是生活随笔為你收集整理的CSS中clear属性的both、left和right浅析的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。