【HTML5+css】流的概念 浮动 浮动的顺序贴靠

流的概念

• 文档流是相对于盒子模型讲的
• 文本流是相对于文字段落讲的
• 元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域， 围绕它布局，也就是没有脱出文本流。

概念检索

1.脱离标准文本流
影响：破坏布局，导致布局错乱
2.不脱离文本流
规范：
同级之间，加float属性，其余的也要加

浮动

• 浮动的本质：用来实现并排的效果
• 浮动使用的要点：要浮动，并排的盒子都实现浮动
• 父盒子要有足够的宽度，否则子盒子会掉下去

浮动异常 父级盒子塌陷

解决方法：
1.父级盒子加高（不能自动撑开，高是固定的，不够灵活）
2.父级盒子加 overflow：hidden； （自动撑开，但会导致溢出的不烦无法显示）
3.加一个无内容的空盒子：clear：both；（必须无意义无宽高）
4.父盒子加伪类属性 ：：after{content：“”;display:block;clear:both}(达到添加无异议空盒子的效果且不影响)

浮动的顺序贴靠特性

子盒子会按顺序进行贴靠，如果没有足够的空间，则会寻找前一个兄弟元素如下图所示:3号盒子会掉到2号盒子的下面

浮动的元素一定能设置宽高

浮动的元素不再区分块级元素、行内元素、已经脱离了标准文档，一律能够设置宽度和高度，即使他
是a标签或span标签

使用浮动的注意事项

• 垂直显示的盒子，不要设置浮动、只有并排显示的盒子才要设置浮动
• “大盒子带着小盒子跑”，一个大盒子中、又是一个小天地，内部可以继续使用浮动
• div是免费的，不要节约盒子

BFC规范

的子元素不会影响到外面的元素，反之亦然BFC规范 (Box-Formatting Context 块级格式化上下文) 是页面上的一个隔离的独立容器，容器里面