清浮动的几种方法

weixin_30565199

于 2018-10-08 11:58:00 发布

阅读量48

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiadengqi/p/9753583.html

本文介绍了两种在CSS中清除浮动的方法：使用额外的HTML元素和伪元素。通过实例展示了如何使元素独占一行，以及如何确保父元素正确包裹其浮动的子元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给需要单独一行的元素添加clear:both

.wrapper{
border:1px solid #000;
}
.content{
width: 100px;
height: 100px;
background: black;
color: #fff;
float: left;
}
p{
border-top: 10px solid green;
clear:both;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">11</div>
<div class="content">22</div>
<div class="content">33</div>
</div>
<p>44</p>
</body>

用伪元素清浮动

.wrapper{
border:2px solid red;
}
.content{
width: 100px;
height: 100px;
background: #000;
color: #fff;
float: left;
}
.wrapper::after{
display: block;
content: "";
clear: both;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
</body>