CSS清除浮动使父级元素展开的三个方法

ttx9n · 发表于 2013-9-4 15:57:14

一个没有设置高度的容器div内如果存在浮动元素（即使用了属性float:left或者float:right)，那么该父级元素会无法展开，下面举个例子为大家详细介绍下，希望对大家有所帮助一个没有设置高度的容器div内如果存在浮动元素（即使用了属性float:left或者float:right)，那么该父级元素会无法展开。
举个例子，有一个div容器，div容器里有两个小容器，分别向左和向右浮动，为了区别这三个容器，分别设置了不同颜色的边框。

复制代码代码如下:
<html>
<head>
<style>
.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>

产生效果：

注意到父级元素content没有展开。

为了使父级元素展开，有三种方法：

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

复制代码代码如下:
<html>
<head>
<style>
.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样式。

复制代码代码如下:
<html>
<head>
<style>
.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;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
</body>
</html>

第三：添加overflow属性：

复制代码代码如下:
<html>
<head>
<style>
.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>

额呵呵 · 发表于 2022-11-6 06:00:07

看看看咋么

5cf304mn2 · 发表于 2022-11-15 11:01:37

有什么好的服务器

9jduu05 · 发表于 2022-11-20 21:24:13

我找了挺久终于找到了

czoz5y · 发表于 2022-11-27 12:55:36

。。。。。。。。。。。。。。。

4k0mp7m · 发表于 2022-12-22 07:01:14

大家都不容易！

3pjdk29w · 发表于 2023-9-12 14:10:28

啦啦啦啦啦啦啦啦！

w18pvaep · 发表于 2024-5-4 03:54:29

呵呵呵呵呵呵

5vulod · 发表于 2024-6-15 15:46:11

下载来瞧瞧

123456 · 发表于 2024-6-28 00:44:28

灌灌灌灌水

账号		自动登录	找回密码
密码			立即注册

[CSS] CSS清除浮动使父级元素展开的三个方法

相关帖子