css清除浮动的六种方法

css中使用float属性时会造成局部坍塌或者内容上顶以及文字环绕等一系列情况出现。
总结了一共六种方法其中有两种最为常用:
1、height属性给父元素设置固定高度
当父元素下的子元素进行了浮动时,我们可以给父元素设置固定的高度让父元素的高度高于子元素。
缺点:父元素的高度是固定的当子元素的高度变化需要修改父元素比较麻烦。
适用点:父子元素的高度都是固定的时候。
2、clear元素
css中有clear元素属性有三个
right清除右浮动 left清除左浮动 both清除所有浮动
clear可以清除浮动带来的影响
缺点:父元素的并不会被子元素给撑起来也就是父元素无法跟随子元素的大小变化而变化。并且添加上下内边距需要计算子元素的高度
3、隔墙法clear元素的进一步运用(常用)
举例两个兄弟div进行了浮动在两个兄弟div之间再加一个div当做一组墙在css样式中编写
.class类名{
clear:both;
height:8px;//此处高度随意越小越不影响布局

缺点:方法二的缺点一样,父元素的并不会被子元素给撑起来也就是父元素无法跟随子元素的大小变化而变化。并且添加上下内边距需要计算子元素的高度
4、内墙法
举例两个或多个兄弟div进行浮动,给两个或多个兄弟div内部再添加一个子div。css编写样式为.class类名{clear:both;}。
5、伪类法
编写css样式
.clearfix::after{
contenr:’ ';//必须要写
display:black;//变为块元素
height:0;//必须要写可以写高度为0
clear:both;
visibility:hidden;//将设置的整个伪类隐藏掉不影响布局
}
把受浮动影响的div添加一个class类名为


这里的写法只是怕小白看不懂,一个div可以有多个class类名 也就是把浮动的div再进行添加一个div ,添加的class类名为clearfix。
6、overflow属性(常用)
给所受浮动影响的div编写css样式 overflow元素属性值为hidden。
属于小偏方可以清除所有浮动带来的一切影响。

你可能感兴趣的:(css3,前端,html5)