复习清除float浮动的方法

原创 wangly 随笔 css布局 246阅读 2017-12-19 11:51:18 举报

其一,通过在浮动元素的末尾添加一个空元素,(1)设置 clear:both属性,(2)after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素;

其二,通过设置父元素(1) overflow:hidden 或者(2)display:table 属性来闭合浮动

  1. 给父元素添加 overflow:hidden; (最常用)。
    html 代码
  1. 给父元素添加 display:table;
    html 代码
  1. 1)添加一个块级元素,并给此元素设置clear:both;清除浮动。
    缺点:会添加很多无意义的标签(不推荐使用)
    html 代码

2)br 有 clear=“all | left | right | none” 属性
缺点:同clear:both会添加很多无意义的标签 (不推荐使用)
html 代码

  1. 通过伪元素 ::after 清除浮动。
    html 代码
评论 ( 2 )
最新评论
wangly 1F 2018-01-08 13:26:55 2F

嗯,清除了,你说的这个就是以上3.1)的clear清除。

zhoulike 2018-01-05 10:16:10 1F

<style>
.div1{
width:100px;
height:100px;
float:left;
}
.div2{
clear:both;
}
</style>
<div class="div1">
1
</div>
<div class="div2">
</div>

这样不就清除了嘛.