清除浮动是什么意思html,html清除浮动

css浮动可以实现很多功能，比如多栏布局，多元素的内联排列等等，在同时也带来了一些问题，浮动后就脱离了原来的文档流，进而就会造成父元素塌陷。

目前解决浮动造成的这个问题主要有一下几种方案：

1. clear:both清除浮动

.container {

border: 1px solid red;

}

.box {

height: 100px;

width: 100px;

margin: 20px;

background: green;

float: left;

}

2. 块状格式化上下文清除浮动

什么是格式化上下文

* 可以包含浮动元素

* 不被浮动元素覆盖

* 阻止父子元素的margin折叠

如何创建格式化上下文

* 根元素

* 浮动元素(float不是none)

* 绝对定位元素(position为fixed或absolute)

* display取值为inline-block,table-cell,table-caption,flex,inline-flex之一

* overflow不是visible的元

.container {

border: 1px solid red;

/*display:table;*/

float:left;

/*overflow: hidden;*/

/*position: absolute;*/

}

.box {

height: 100px;

width: 100px;

margin: 20px;

background: green;

float: left;

}

3. 伪类清楚浮动

.clearfix:before,

.clearfix:after {

display: table;

content: " ";

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

}

总结

常用的以上三种清楚浮动的办法，推荐使用第三种，兼容性比较好，并且没有添加格外的一些类，可移植性比较好