王老师html零基础学习笔记第9课—浮动+清除浮动

浮动

浮动的定义：使元素脱离文档流，按照指定方向（左右）发生移动，遇到父边界或者相邻的浮动元素停了下来。

文档流：是文档中可显示对象在排列时所占用的位置/空间(在页面中占位置)。

脱离文档流：在页面中不占位置, CSS 中，通过 float 属性实现元素的浮动。

任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

浮动的一般情况

浮动的特殊般情况

浮动对文字的影响

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。因此，创建浮动框可以使文本围绕图像

浮动float和inline-block的比较

清除浮动

为什么清除浮动？float浮动造成元素父级高度塌陷

清除浮动的多种方法:

1、最后添加空标签clear属性值:left   right   both

2、父级办法:

a. 加高                           问题：扩展性不好

b. inline-block 清浮动方法：问题：margin:auto失效；

c. overflow:hidden 清浮动方法； 

d. after伪类  元素内部末尾添加内容          (时下主流)

.clearfix{zoom:1;}

.clearfix：after{content:'';display:block;clear:both;}