html去掉⽗元素样式,CSS清除浮动使⽗级元素展开的三个⽅法⼀个没有设置⾼度的容器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;
div border属性}
第三:添加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;
}