CSS之浮动

目录

一、浮动

一、脱标

二、浮动元素一行显示

三、行内块元素的特性

四、浮动元素搭配标准流使用

---

一、浮动

网页布局第一准则：块级元素竖着排列，标准流横着排找浮动。

标准流就是默认的方式排列，块级元素独占一行，从上往下，行内元素从左往右。

如果想让块级元素横向排列，可以使用语句display:inline-block变为行内块元素。但是每个元素之间会有缝隙，如图一。

为了消除这个缝隙，我们我可以用浮动float:left;创建浮动框，将其移到一边，直到左边缘或者右边缘及包含另一个块或者浮动框。如图二。

一、脱标

1、浮动的元素会脱离标准流的控制（浮），与标准流不在一个层次上，移动到指定位置（动）。

2、脱标之后的盒子不在保留原来的位置，会被其他标准流盒子占有。如下图所示

二、浮动元素一行显示

默认最顶部对齐

三、行内块元素的特性

不管什么元素，只要加了浮动特性，就会具有行内块元素的特性，例如

 <style>
        * {
            padding: 0;
            margin: 0;
        }
        span {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
            float: left;
        }
        p {
            height: 200px;
            background-color: aqua;
            float:left;
}
</style>

         <!-- 不管是神魔元素例如行内元素，只要加上浮动，就属于行内块元素 可以设置宽度和高度了  -->

<!-- p没有设置宽度 如果没有添加float之前默认和父级元素一样宽，加了浮动之后 里面的内容有多少就多宽 行内块元素就这样 -->

p里面的内容是1111

消除浏览器默认的内外边距p就对齐了

 * {
            padding: 0;
            margin: 0;
        }

四、浮动元素搭配标准流使用

为了约束浮动元素的位置，通常先放一个标准流的盒子，排列上下位置，内部元素浮动排列左右。

例： 1234这四个盒子一行显示，中间留有空隙，可以设置margin-right,但是最后一个盒子被挤出去了，可以不用设置右边的外边距，单独设置一个类属性margin-right:0

（ps:可能没有生效，要注意权重的问题）！