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

它們的具體含義如下：

• none：允許兩邊都可以有浮動對象；
• both：不允許有浮動對象;
• left：不允許左邊有浮動對象;
• right：不允許右邊有浮動對象。

這里主要討論both、left和right三個值。

要用到的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>

?

一、普通浮動，無清除浮動，外容器塌陷：

DOM結構：

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

效果圖：

二、左浮動，clear:both清除浮動：

DOM結構：

<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>

?

效果圖：

三、右浮動，clear:both清除浮動：

DOM結構：

<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>

效果圖：

四、左右浮動，clear:both清除浮動：

DOM結構：

<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>

效果圖：

五、左浮動，清除左浮動，左浮動，未清除浮動的塌陷：

DOM結構：

<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>

效果圖：

六、右浮動，清除右浮動，左浮動，未清除浮動的塌陷：

DOM結構：

<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>

效果圖：

轉載于:https://www.cnblogs.com/aaron-shu/p/4150009.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。