CSS中的浮动和清除浮动

浮动到底是什么?

  • 浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素。

浮动有哪些特征?

浮动会脱离文档

  • 浮动不会影响普通元素的布局,同时也存在盖住普通元素的风险。


    浮动会脱离文档流

浮动可以内联排列

  • 浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的存在。如果每个元素的高度不一致,会出现“卡住”的情况。


    浮动可以内联排列

浮动会导致父元素高度坍塌

.box-wrapper {
  border: 5px solid red;
}
.box-wrapper .box {
  float: left; 
  width: 100px; 
  height: 100px; 
  margin: 20px; 
  background-color: green;
}
<div class="box-wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

结果如下,浮动元素脱离了文档流,并不占据文档流的位置,自然父元素也就不能被撑开,所以没了高度。


父元素高度坍塌

如何清除浮动?

清除浮动实际上是“消除浮动影响”;而不是“浮动”本身。

1.clear清除浮动(推荐使用)

clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素,底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。

接着上面的例子,我们简单修改一下HTML代码,如下

<div class="box-wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div style="clear:both;"></div>
</div>
clear清除浮动

不要在浮动元素上清除浮动
如果我们给第三个元素加上clear:both,结果会怎样?

<div class="box-wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box" style="clear:both;"></div>
</div>
不要在浮动元素上清除浮动

给第三个元素加上clear:both之后,第三个元素的左右都没有挨着浮动元素,但是为什么高度还是坍塌了呢?机智的你可能发现了,由于第三个元素是浮动元素,脱离了文档流,就算给第三个元素上下加了清除空间,也是没有任何意义的。

2.对父级设置适合CSS高度

对父级设置适合高度样式清除浮动,这里对“.box-wrapper”设置一定高度即可,一般设置高度需要能确定内容高度才能设置。

3.父级div添加 overflow:hidden样式

overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动。

参考链接
http://www.jianshu.com/p/cd4cde49f0d4
http://www.divcss5.com/jiqiao/j406.shtml

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 从业三年,项目无数,现在回过头来,想要把一些重要的知识用白话整理出来:这个东西是什么?怎样才是最佳实践?希望对自己...
    齐修_qixiuss阅读 40,487评论 19 203
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 浮动 CSS允许浮动任何元素。 浮动元素 首先,会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。...
    exialym阅读 1,246评论 0 6
  • 一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...
    DeeJay_Y阅读 901评论 0 4
  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?(1)浮动元素会脱离正常的文档流,按...
    饥人谷_DanaeJJ阅读 450评论 0 0