当前位置: 首页 > Web前端 > CSS

简介清浮

时间:2023-03-30 16:18:23 CSS

为什么清浮?1.影响其他元素定位。父框的高度为0,所有的子框都是浮动定位的。子框不会拉伸父框,下面的元素将位于子框下方。2.背景图像或颜色因浮动而无法正常显示。如果为parent设置了CSS背景色或CSS背景图片,且parent无法拉伸,则CSS背景无法显示。3、外边距和内边距设置的影响。由于浮动,父子之间设置的csspadding和cssmargin属性的值无法正确表达。尤其是top和bottom的padding和margin无法正确显示。清除浮动方法总结:1、为父元素设置高度,为父元素设置合适的高度样式,清除浮动。一般高度设置需要能够确定内容高度才可以设置(高度设置为:内容高度+内边距+边框)。2、clear:both清除浮动我们在parent"

"末尾前加一个div,引入"class="clear""样式,这样就可以清除浮动了。//html部分left(向左浮动)
right(向右浮动)
//csspart.divfloat{width:400px;边框:1px实心#F00;背景:#FF0;}.divfloat-left,.divfloat-right{width:180px;高度:100px;border:1pxsolid#00F;background:#FFF;}.divfloat-left{float:left;}.divfloat-right{float:right;}.clear{clear:both;}3.overflow:hiddenclearsfloat给父CSS选择器添加overflow:hidden样式,可以清除使用的float生成float。【BFC具有三大特点:(1)BFC会防止垂直边距(margin-top,margin-bottom)塌陷。(2)BFC不会重叠浮动元素。(3)BFC可以包含浮动元素。我们可以使用BFC的第3个特性来“清除浮动”。其实这里清除浮动已经不合适了。应该说BFC是用来包容浮动的。(如果想了解更多关于BFC,可以参考“https://www.w3.org/TR/CSS21/v...”的详细说明)]//html部分left(向左浮动)right(向右浮动)//csspart.divfloat{width:400px;边框:1px实心#F00;背景:#FF0;溢出:隐藏;}.divfloat-left,.divfloat-right{width:180px;高度:100px;边框:1px实心#00F;background:#FFF;}.divfloat-left{float:left;}.divfloat-right{float:right;}4.单伪元素//双伪元素清浮单伪元素清浮原理:使用:after伪类在浮动块后面添加一个display:none的不可见块内容,并设置clear:both来清除浮动块。.clearfix:after{内容:“”;/*必须为空*/visibility:hidden;显示:块;高度:0字体大小:0;清除:两者;}.clearfix{缩放:1;/*兼容IE浏览器*/}双伪元素清浮原理:使用:after伪类在浮块后面添加display:table的不可见块内容,并设置clear:both为清浮.(注意:这里使用display:table来隐藏这个空白,而不是设置visibility:hidden;height:0;font-size:0;,这与清除单个伪元素的浮动不同)。.cearfix:before,.cearfix:after{内容:“”;/*必须为空*/display:table;}.cearfix:after{clear:both;}.cearfix{zoom:1;/*兼容IE浏览器*/}总结:第一种方法:简单易掌握,但只适合固定高度的布局,不推荐使用。第二种方法简单,浏览器支持的也不错,但是如果页面浮动布局比较多,必须加很多空的div,给人感觉很麻烦,不推荐使用,可以理解。第三种方法:代码少,浏览器支持,不能和position结合使用,因为多余的size会被隐藏,只推荐用于不使用position的布局。第四种方法:浏览器支持较好,推荐使用。