浮动

浮动

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

1. 常规流
2. 浮动
3. 定位

浮动应用场景

1. 文字环绕
2. 横向排列

浮动的基本特点

修改float属性值为：

• left:左浮动，元素靠上靠左
• right：右浮动，元素靠上靠右

默认值为none

1. 当一个元素浮动后，元素必定为块盒(更改display属性为block)
2. 浮动元素的包含块，与常规流一样，为父元素的内容盒。

盒子尺寸

1. 宽度为auto时,适应内容宽度（常规流为自动填充满）。
2. 高度为auto时,与常规流一致，适应内容的高度。
3. margin为auto时，无论什么方向，都为0。
4. 边框，内边距，百分比设置与常规流一致。

盒子排列

1. 左浮动的盒子靠上靠左排列。
2. 右浮动的盒子靠上靠右排列。
3. 浮动盒子在包含块中排列时，会避开常规流块盒。
4. 常规流块盒在排列时，无视浮动盒子。
5. 行盒在排列时，会避开浮动盒子。
6. 外边距合并不会发生。

如果文字没有在行盒中，浏览器会自动生成一个行盒来包裹文字，该行盒叫做匿名行盒。

• Tips :设置文字与图片之间的间距时，要设置图片的margin，而非包含文字的P元素的margin。

高度坍塌

高度坍塌的根源：常规流和自动自动高度，在计算时，不会考虑浮动盒子。

解决方式：清除浮动

清楚浮动： 涉及属性：clear

• 默认值：none
• left:清除左浮动，该元素必须出现在前面所有左浮动盒子的下方。
• right:清除右浮动，该元素必须出现在前面所有右浮动盒子的下方。
• both:清除左右浮动，该元素必须出现在前面所有浮动盒子的下方。

两种写法（解决办法）：

一、 在浮动盒子下加如下一个div

    <div class="clearfix" style="clear: both;"></div>

二(推荐) 、增加伪类选择器

    <style>
        .clearfix::after{
            content: "";
            display:block;
            clear: both;
        }
    </style>

    <div class="container clearfix"></div>