核心提示：首先我们来了解一下文档流:文档流是文档中可显示对象在排列时所占的位置.(元素在页面中所占的位置)这个了解了以后接下来我们就谈谈浮动:floatfloat:指定元素设置元素的浮动值: left左浮动ri...
首先我们来了解一下文档流:
文档流是文档中可显示对象在排列时所占的位置.
(元素在页面中所占的位置)
这个了解了以后接下来我们就谈谈浮动: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;失效
