为什么要清除浮动

标准流 / 文档流：默认情况下，块级元素上下摆放，行内元素左右摆放。
浮动：可以脱离文档流，改变元素排列规则
清除浮动原因：
在父盒子没有设置高度的情况下，父盒子高度默认由子盒子撑开，当子盒子浮动脱离文档流不再占位后，父盒子高度会变为0。即造成了父盒子高度的塌陷。
或某个元素浮动导致它不占位，会对后续元素的排列造成影响。
所以要清除浮动

清除浮动的方法

方法1：为父元素设置高度

缺点：高度写死会导致盒子大小固定，不利于实现下拉加载数据

  <!--html--><div class="father"><div class="son"></div></div>

 /* css */ .father{width: 300px;background-color: #8686ec; /* 【解决】为父元素添加高度 */height: 100px;}.son{/* 子元素脱离文档流，父元素高度为0 */float: left; width: 100px;height: 100px;background-color: #d69797;}

方法2：在受影响的父元素内部末尾添加块级元素-如div

缺点：当需要清除浮动的元素很多时，网页的html结构中会出现很多空的div标签，使网页结构复杂了。

    <div class="father"><div class="son"></div><!-- 【解决】在父元素的结束标签前 添加一个块级元素 + clear:both --><div class="clear"></div></div>

         .father{width: 300px;background-color: #8686ec; }.son{/* 子元素脱离文档流，父元素高度为0 */float: left; width: 100px;height: 100px;background-color: #d69797;}.clear{clear: both;}

方法3：伪元素清除法

原理与2类似-----相当于在父级元素的内部末尾添加了一个块级内容。

    <!-- 添加clearfix类名 --><div class="father clearfix"><div class="son"></div></div>

        .father{width: 300px;background-color: #8686ec; }.son{/* 子元素脱离文档流，父元素高度为0 */float: left; width: 100px;height: 100px;background-color: #d69797;}/* 【解决】伪元素清除浮动 *//* 谁要清除浮动，给谁添加clearfix类 */.clearfix::after{content:"";display: block;clear: both;}

方法4：给父元素设置overflow: hidden；

<div class="father"><div class="son"></div>
</div>

    .father{width: 300px;background-color: #8686ec; /* 【解决】为父元素添加overflow:hidden */overflow: hidden;clear: both;}.son{/* 子元素脱离文档流，父元素高度为0 */float: left; width: 100px;height: 100px;background-color: #d69797;}

BFC解释清除浮动效果

为什么父元素的overflow: hidden;能有清除浮动效果呢？

因为 overflow:hidden;可将当前盒子变为BFC盒子

BFC概念：

块级格式化上下文(BFC)，是web页面的可视CSS渲染的一部分，是块盒子的布局过程中产生的区域。即BFC是一个区域，这个区域的一些特点，会达到清除浮动的效果。

BFC盒子的特点：

BFC盒子会默认包裹内部的子元素，包括标准流和浮动的子元素都包括在内。
BFC盒子本身与子元素之间不存在margin-top的塌陷问题。

创建BFC盒子的其他方法：

添加浮动的元素是BFC盒子
行内块级元素是BFC盒子
overflow属性不取visible时，都是BFC盒子

/* 创建BFC盒子的其他方法---把father盒子变为BFC盒子*/
.father{/*方法1*/float: left;/*方法2*/display: inline-block;/*方法3*/overflow: hidden;
}

css清除浮动的方法及原因相关推荐

div为空的时候浮动没有效果_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达作者:html中文网 | 编辑:前端妹来源:html.cn/web/css/19613.htm ...
css为什么要用浮动_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达作者:html中文网 | 编辑:前端妹来源:html.cn/web/css/19613.htm ...
CSS清除浮动的方法
我们先看看浮动导致什么样的效果. 正常没有浮动的案例如下: <!DOCTYPE html> <html><head><meta charset="u ...
web前端css清除浮动的方法总结
方法1:祖先加高法 //不常用,不能适应页面的快速变化如果一个元素要浮动,那么它的祖先元素一定要有高度.有高度的盒子,才能关住浮动. 只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元 ...
CSS 清除浮动的方法
CSS中利用float属性可以使元素脱离文档流浮动到父元素的左侧或者浮动的父元素的右侧,这时如果对元素使用浮动属性,会导致父元素不能被撑开. CSS代码: .wrapper{width: 40em;b ...
CSS清除浮动的方法及原理
为什么清除浮动 1.浮动的缺点: 浮动虽然可以便于页面布局,但同时会产生一些问题,也就是我们常说的"副作用".一个元素设置了浮动(即 float 值为 left, right 或 ...
前端开发面试题—CSS清除浮动的方法
活学活用，CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
css清除浮动无效,css清除浮动的处理方法
根据<精彩绝伦的css> JS Bin .news{ outline:1px solid pink } .col{ float: left; width:33%; outline:1px ...

css清除浮动的方法及原因

清除浮动的方法及原因