一般清除浮動的三種方式

一般清除浮動的三種方式

第一種給父元素添加overflow: hidden;

我們都知道overflow:hidden可以溢出隱藏，即當內容元素的高度大於其包含塊的高度時，設置該屬性即可把內容區域超出來的部分隱藏，使內容區域完全包含在該包含塊中。

然而"overflow:hidden"還有另外一個特殊的用途，那就是清除包含塊內子元素的浮動。

具體代碼如下 代碼片.

<code>//css代碼 .wrap{width: 1000px;margin: 0 auto;border: 2px solid #909090;overflow: hidden;}.wrap>div{width: 200px;height: 200px;border: 2px solid aquamarine;background: #ccc;}.wrap>div:nth-child(1){float: left;}.wrap>div:nth-child(2){float: right;}.wrap>div:nth-child(3){float: left;}/<code>

<code>//html
第一個
第二個
第三個
/<code>

第二種 使用偽類元素+clear: both實現;

偽類元素after可以在元素內部末尾添加內容，並且不再內容框架中顯示，它的作用相當於在元素內部末尾添加一個空標籤並使用clear: both清楚浮動。

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定製課程，去年我花了一個月整理了一份最適合2019年學習的web前端學習乾貨，各種框架都有整理，送給每一位前端小夥伴，想要獲取的可以關注我的頭條號並在後臺私信我：前端，即可免費獲取。

[建議] 當元素需要撐起高度以包含內部的浮動元素時，通過對偽類設置 clear 或觸發 BFC 的方式進行 clearfix。儘量不使用增加空標籤的方式。

解釋：

觸發 BFC 的方式很多，常見的有：

float 非 none

position 非 static

overflow 非 visible

<code>//css.clearfix:after{content: "\\200b";/*0寬度的空格*/display: block;height: 0;clear: both;}.wrap{width: 1000px;margin: 0 auto;border: 2px solid #909090;}.wrap>div{width: 200px;height: 200px;border: 2px solid aquamarine;background: #ccc;}.wrap>div:nth-child(1){float: left;}.wrap>div:nth-child(2){float: right;}.wrap>div:nth-child(3){float: left;}/<code>

<code>//html
第一個
第二個
第三個
/<code>

第三種 父元素添加高度;

直接在父元素添加高度

<code>//css.wrap{width: 1000px;margin: 0 auto;border: 2px solid #909090;height:204px;}.wrap>div{width: 200px;height: 200px;border: 2px solid aquamarine;background: #ccc;}.wrap>div:nth-child(1){float: left;}.wrap>div:nth-child(2){float: right;}.wrap>div:nth-child(3){float: left;}/<code>

<code>//html
第一個
第二個
第三個
/<code>

原文鏈接：https://blog.csdn.net/weixin_44965420/article/details/104248643

閱讀更多 小白沖沖沖沖 的文章

關鍵字: 0verflow 浮動 包含