您的位置：首页 > Web前端 > CSS

CSS清除浮动使父级元素展开

2017-06-25 18:41 627 查看

　　一个没有设置高度的容器div内如果存在浮动元素（即使用了属性float:left或者float:right)，那么该父级元素会无法展开，下面用三种方法解决：

　　源代码为：

　　

<!DOCTYPE html>
<html>
<head>
<title>清除子元素的浮动</title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

产生的效果：

方法一：设置父级元素的高度，但是要事先知道内容的高度，这里内部的元素高度是100像素，加上上下边框高度2像素，一共是102像素。

<!DOCTYPE html>
<html>
<head>
<title>清除子元素的浮动</title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

效果为：

方法二：添加样式，并在父级元素结束标签前添加both:clear样式。

<!DOCTYPE html>
<html>
<head>
<title>清除子元素的浮动</title>
<style type="text/css">
.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;
}
.cl{
clear: both;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
<div class="cl"></div>
</div>
</body>
</html>

效果为：

方法三：添加overflow属性

<!DOCTYPE html>
<html>
<head>
<title>清除子元素的浮动</title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>

效果为：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航