float浮动的详解

首先我们来了解一下文档流:
文档流是文档中可显示对象在排列时所占的位置.
(元素在页面中所占的位置)
这个了解了以后接下来我们就谈谈浮动:float
float:指定元素设置元素的浮动
值: left – 左浮动
right – 右浮动
float特点:
1 脱离文档流
2 浮动后不占位置.
3 后面的普通元素会战绩浮动元素的位置.
4 造成父级高度塌陷.
5 没有完全脱离文档流,会把文字挤出来,达到文本环绕浮动元素的效果.(行内元素与行内块都是被当作文字来解析的)
6 给了浮动的元素,会影响后面的元素
7 让块级元素宽度为内容的宽度或者width的值的宽度
8 如果父级宽度太窄，无法容纳所有的浮动元素，无法容纳的浮动元素会往下掉；
9 如果浮动的元素高度不相同,后面要掉下的浮动元素,会被前面的个子高的浮动元素卡住.(以个子高的为主)

注意 : 1 写了浮动,一定要记住清楚
2 不要直接在加了浮动的元素上写clear

解决浮动带累的父元素高度塌陷和一些影响
clear: left | right | both ;

解决浮动:哪里浮动哪里清楚
1 都给浮动 — 会影响后面,挡住后面的元素
2 给浮动元素的父级加高度 — 可以解决父元素高度塌陷问题 (扩展性不好)
3 给浮动元素后面加一个空的块级元素,给空元素设置
clear:both;清除两侧的浮动
4 after:清楚浮动 — 最适合的清楚方法
.box:after{
content:’ ‘;
display:block;
clear:both;
}
注意 : 设置清除浮动的元素必须是块级元素
行内元素加浮动:
会让行内元素变成块级元素( 但是默认由内容撑开高度或者固定值)
margin:auto;失效