简述清除浮动

FuisonDesign 发布于2019-08-29 12:35 / 505人阅读

摘要：为什么要清除浮动影响其他元素定位父盒子高度为，子盒子全部浮动定位，子盒子不会撑开父盒子，下面的元素会到子盒子的下面。清除浮动方法总结对父级元素设置高度对父级设置适合高度样式清除浮动，一般设置高度需要能确定内容高度才能设置高度设置为内容高度。

为什么要清除浮动？

1、影响其他元素定位
父盒子高度为0，子盒子全部浮动、定位，子盒子不会撑开父盒子，下面的元素会到子盒子的下面。

2.背景图片或颜色不能正常显示
由于浮动产生，如果对父级设置了CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

3、外边距内边距设置影响
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

清除浮动方法总结：

1、对父级元素设置高度
对父级设置适合高度样式清除浮动，一般设置高度需要能确定内容高度才能设置（高度设置为：内容高度+padding+border）。

2、clear:both清除浮动
我们在父级“

”结束前加div引入“class="clear"”样式,这样就可以清除浮动了。

//html部分
 
  left（向左浮动） 
  right(向右浮动） 
   
 
//css部分
.divfloat {
  width:400px;
  border:1px solid #F00;
  background:#FF0;
} 
.divfloat-left,.divfloat-right {
  width:180px;
  height:100px; 
  border:1px solid #00F;background:#FFF;
} 
.divfloat-left {
  float:left;
} 
.divfloat-right {
  float:right;
} 
.clear {
  clear:both;
}

3、overflow:hidden清除浮动
对父级CSS选择器加overflow:hidden样式，可以清除使用的float产生浮动。【BFC有三大特性:(1)BFC会阻止垂直外边距（margin-top、margin-bottom）折叠.(2)BFC不会重叠浮动元素.(3)BFC可以包含浮动.我们可以利用BFC的第三条特性来“清浮动”，这里其实说清浮动已经不再合适了，应该说用BFC来包含浮动。（还想深入了解BFC的可以参看“https://www.w3.org/TR/CSS21/v...”的详细描述）】

//html部分
 
  left（向左浮动） 
  right(向右浮动） 
   
 
//css部分
.divfloat {
  width:400px;
  border:1px solid #F00;
  background:#FF0;
  overflow:hidden;
} 
.divfloat-left,.divfloat-right {
  width:180px;
  height:100px;
  border:1px solid #00F;
  background:#FFF;
} 
.divfloat-left {
  float:left;
} 
.divfloat-right { 
  float:right;
}

4、单伪元素//双伪元素清除浮动
单伪元素清除浮动原理：通过:after 伪类在浮动块后面加上一个 display:none 的不可见块状内容来，并给它设置 clear:both 来清理浮动。

.clearfix:after {
  content:" ";  /*必须为空*/
  visibility:hidden;
  display:block;
  height:0
  font-size:0;
  clear:both;
}

.clearfix {
  zoom:1;        /*兼容IE浏览器*/  
}

双伪元素清除浮动原理：通过:after 伪类在浮动块后面加上一个 display:table 的不可见块状内容来，并给它设置 clear:both 来清理浮动。（注意：这里隐藏这个空白使用的是 display: table，而不是设置 visibility:hidden;height:0;font-size:0;与单伪元素清除浮动有所区别）

.cearfix:before, .cearfix:after {
   content:" ";    /*必须为空*/
   display:table;
}
.cearfix:after {
  clear:both;
}
.cearfix {
  zoom:1;     /*兼容IE浏览器*/
}

总结：

第一种方法：简单，容易掌握，但只适合高度固定的布局，不推荐使用可以了解。
第二种方法：简单，浏览器支持好，但如果页面浮动布局多，就要增加很多空div，让人感觉很麻烦，不推荐使用，可以了解。
第三种方法：代码少，浏览器支持，不能和position配合使用，因为超出的尺寸的会被隐藏，只推荐没有使用position的布局使用。
第四种方法：浏览器支持好,建议使用。

GPU云服务器云服务器清除浮动简述云计算简述java 简述云计算概念

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111997.html

前端面试题总结——HTML(持续更新中)

摘要：等知名网站已经开始测试并使用格式。页面加载速度更快结构化清晰页面显示简洁。表现与结构相分离。易于优化搜索引擎更友好，排名更容易靠前。用于替换当前元素，用于在当前文档和引用资源之间确立联系。前端面试题总结——HTML(持续更新中) 1.什么是HTML？ HTML：HyperText Markup Language超文本标记语言 2.XHTML和HTML有什么区别 HTML是一种基本的W...

afishhhhh 2019-08-01 18:38 评论0 收藏0
前端面试题总结——HTML(持续更新中)

摘要：等知名网站已经开始测试并使用格式。页面加载速度更快结构化清晰页面显示简洁。表现与结构相分离。易于优化搜索引擎更友好，排名更容易靠前。用于替换当前元素，用于在当前文档和引用资源之间确立联系。前端面试题总结——HTML(持续更新中) 1.什么是HTML？ HTML：HyperText Markup Language超文本标记语言 2.XHTML和HTML有什么区别 HTML是一种基本的W...

binta 2019-08-26 17:15 评论0 收藏0
html5与css3阶段复习题

摘要：将超出对象尺寸的内容进行裁剪，不会出现滚动条。过渡效果使用动画使用需要触发一个事件才会随着时间改变其属性在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素属性，达到一种动画的效果动画不需要事件触发，过渡需要。 1.请列出核心选择器、层次选择器有哪些 (5) 核心选择器：id选择器、class选择器、标签选择器、逗号选择器、普遍选择器层次选择器：子代选择器、后代选择器、下...

techstay 2019-08-30 15:44 评论0 收藏0
css浮动、BFC、定位问题

摘要：元素框从文档流完全删除，并相对于其包含块定位。产生折叠的必备条件必须是邻接的而根据规范，两个是邻接的必须满足以下条件必须是处于常规文档流非和绝对定位的块级盒子并且处于同一个当中。 1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响? 何谓浮动元素？有什么特征？所谓浮动元素，即是设置了浮动属性的元素。其特征为： 1.浮动的框可以向左或者向右移动，直到它的外...

Tony 2019-08-29 12:53 评论0 收藏0
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

li21 2019-08-23 17:11 评论0 收藏0