八、浮动

1、浮动的定义

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

文档流

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

脱离文档流：在页面中不占位置

（1）浮动一般情况

当把框 1 向右浮动时，它脱离文档流并且向右移动，
直到它的右边缘碰到包含框的右边缘

image.png image.png image.png

（2）浮动特殊情况

1、当框 1 向左浮动时，框1不占空间，相当于悬浮，
框1覆盖住了框 2，使框 2 从视图中消失。

image.png

2、给了浮动的元素，只会影响后面的元素；(任何元素都可以浮动)

如果父级宽度太窄，无法容纳所有的浮动元素，无法容纳的浮动
元素会往下掉

image.png

3、如果浮动元素的高度不同，那么当它们向下移动时�可能被其它浮动元素“卡住”

image.png

3、浮动对文字影响

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

image.png

4、浮动和inline-block的对比

image.png

5、清除浮动

浮动导致父元素的塌陷，所以要清除浮动

清除浮动 clear:

left right both none

清除浮动的方法

1、子级办法

子级最后添加空标签

父级办法

1、加高 问题：扩展性不好
2、inline-block 清浮动方法 问题：margin:auto;失效
3、overflow:hidden 清浮动方法； 问题：要配合宽度
4、after伪元素内部末尾添加内容 时下主流

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

6设置元素宽度大小值min-width

设置元素的最小宽度

max-width
设置元素的最大宽度