为什么需要清除浮动？

父级没有高度
子盒子浮动了
影像到下面的布局，我们就应该清除浮动

使用场景：

假设我们要放很多盒子（不确定数量），这样就无法确定盒子的高度。如下图，设置蓝色盒子高度后，假如子盒子（浮动）数量多换行后显示到盒子外面去了，这样不是我们想要的结果，我们想让蓝色盒子来自适应高度。

去掉高度设置（蓝色盒子的高度为0了），没有给父盒子高度，子盒子浮动不占有位置，最后父级盒子的高度就会为0，就会影响下面的标准流盒子。

由于浮动元素不再占用原文档流位置，所以它会影响后面的元素排版。

清除浮动后（浮动的子盒子会撑开父盒子）

清除浮动的四种方法（让子盒子闭合浮动）

额外标签法（将该盒子放在最后一个子盒子位置处）

.clear {clear: both;
}
<div class="clear">banner_box1</div>

overflow:hidden（该样式加在父级盒子的样式中）

/* 清除浮动，溢出隐藏，无法显示溢出部分 */overflow: hidden;

after伪元素

.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;
}.clearfix{/* IE6、7专有*/*zoom:1;
}

双伪元素清除浮动

.clearfix::before,.clearfix::after {content: "";display: table;}/*照顾低版本浏览器使用的单引号*/.clearfix:after {clear: both;}.clearfix {*zoom: 1;}

HTML+CSS清除浮动相关推荐

CSS清除浮动大全共8种方法
清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...
CSS清除浮动_清除float浮动
CSS清除浮动方法集合一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. ...
CSS——清除浮动的六种解决方案
CSS--清除浮动的六种解决方案参考文章: (1)CSS--清除浮动的六种解决方案 (2)https://www.cnblogs.com/iwilling/p/8485608.html (3)htt ...
活学活用，CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
css清除浮动的原理
最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解, 如果你已经很了解什么是浮动和浮 ...
[css] 清除浮动的方式有哪些及优缺点？
[css] 清除浮动的方式有哪些及优缺点? 什么是盒子塌陷? 外部盒子本应该包裹住内部的浮动盒子,结果却没有.问题出现的原因父元素只包含浮动元素,那么它的高度就会塌缩为零(前提就是你们没有设置高度( ...
div为空的时候浮动没有效果_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达作者:html中文网 | 编辑:前端妹来源:html.cn/web/css/19613.htm ...
一、css清除浮动方法学习笔记总结（超详细，简单易懂）
** css清除浮动方法学习笔记总结(超详细,简单易懂) ** 问题: 上图中,由于container(父级元素)未设置高度,其内部子元素设置了float浮动,导致与container同级(也就是co ...
CSS外边距合并和CSS清除浮动
外边距合并外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页 ...
CSS清除浮动清除float浮动
一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 1.背景不能显示由于浮动产生,如果对父级设置了(CSS b ...

HTML+CSS清除浮动

为什么需要清除浮动？

使用场景：

清除浮动的四种方法（让子盒子闭合浮动）

HTML+CSS清除浮动相关推荐

最新文章

热门文章