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