一個沒有設置高度的容器div內如果存在浮動元素(即使用了屬性float:left或者float:right)，那么該父級元素會無法展開。

為了使父級元素展開，有三種方法：

第一：設置父級元素的高度，但是要事先知道內容的高度，這里內部的元素高度是100像素，加上上下邊框高度2像素，一共是102像素。

復制代碼

代碼如下:

.content {

width:500px;

border:1px solid red;

height:102px;

}

.left {

width:100px;

height:100px;

border:1px dashed blue;

float:left;

}

.right {

width:100px;

height:100px;

border:1px dashed green;

float:right;

}

第二：添加樣式，并在父級元素結束標簽前添加both:clear樣式。

復制代碼

代碼如下:

.content {

width:500px;

border:1px solid red;

}

.left {

width:100px;

height:100px;

border:1px dashed blue;

float:left;

}

.right {

width:100px;

height:100px;

border:1px dashed green;

float:right;

}

.clear {

clear:both;

}

第三：添加overflow屬性：

復制代碼

代碼如下:

.content {

width:500px;

border:1px solid red;

overflow:hidden;

}

.left {

width:100px;

height:100px;

border:1px dashed blue;

float:left;

}

.right {

width:100px;

height:100px;

border:1px dashed green;

float:right;

}

總結

以上是生活随笔為你收集整理的html去掉父元素样式,CSS清除浮动使父级元素展开的三个方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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