css基础笔记4-浮动

浮动

浮动可以让多个块级元素一行内排列显示

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

浮动特性

浮动元素会脱离标准流（脱标）：脱离标准普通流的控制（浮）移动到指定位置（动）。浮动的盒子不再保留原先的位置，并且在标准流中不再占有位置（也就是不会撑大父盒子的大小）。可以理解为标准流的元素在地上，而浮动的盒子在天上，浮动的盒子相当于在地上没有位置，地上的元素布局不会考虑到天上的，对地上的来说，布局的时候天上的相当于不存在，但是天上的会遮住地上的。

浮动的元素会一行内显示并且元素顶部对齐：浮动的元素是互相靠贴在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

浮动的任何元素都会具有行内块元素的特性：浮动后的块级元素大小根据内容来定，浮动后的行内元素会具有行内块元素的特性（比如可以设置宽高）。

浮动的盒子不会有外边距合并的问题。

为了约束浮动元素位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则

浮动只影响后面的标准流，不会影响前面的标准流。

 

如图，第一个盒子没有浮动，第二个浮动了，第三个没有浮动。所以，在一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。

清除浮动

为什么要清除浮动：父级没高度，子盒子浮动了，影响下面布局了。

清除浮动的本质是清除浮动元素造成的影响

如果父盒子本身有高度，则不需要清除浮动

清除浮动后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了

清除浮动的策略是：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

额外标签法会在浮动元素末尾添加一个空的标签。例如<div style="clear:both"></div>,或者其他标签如br等。优点：通俗易懂，书写方便。缺点：添加许多无意义的标签，结构化较差。并且新增的盒子要求必须是块级元素，不能是行内元素。

父级添加overflow属性，将其属性设置为hidden,auto或者scroll.优点：代码简洁。缺点：无法显示溢出的部分。

 

后面两种结构语义化正确，但是有兼容性问题，ie6-7不支持after。