Css - 浮动布局

css - 浮动

浮动布局 float

取值：left | right | none

设置给：块元素、行内元素、行内块元素

作用：利用float属性可设置元素的浮动，使元素可以在一行上显示。虽然浮动主要是应用于块元素，但行内元素其实也可以浮动，但行内元素本来就是一行显示，所以也没有这个必要

浮动布局的特点

1.一旦元素浮动，它就会脱离标准文档流。它会悬在它原来的位置上面，也即它原来占据的位置被腾空。

2.浮动元素对它前面的兄弟元素无任何影响，只对它后面的兄弟元素有影响。由于它已经脱离了正常文档流，它腾空的位置就会被其它正常元素占据。比如：两个尺寸相同的兄弟div，A在前，B在后，当A向左浮动后，B就会占据A的位置，但由于A悬浮在B上面，所以会看不到B。看起来就是两个盒子处在了同一个位置。但是如果它下面的元素是行内/行内块元素，则浮动的块元素会与它们并列显示，不会发生重叠

3.只有当元素全部浮动后才会并排显示，只要中间有未浮动的div挡路，由于未浮动的div是独占一行，这就会导致后面的浮动元素在下一行显示而非并排。比如：三个兄弟div，A向左浮动、B不浮动、C向左浮动，则AB会重叠、C显示在B原来的位置

4.一行上，某元素浮动后，原本与它基线对齐的元素会变成与它顶对齐，即便多个元素都浮动，同样也是顶线对齐

5浮动元素会受到父元素padding和自身margin的影响会在padding、margin处停止

6.元素一旦浮动就会变成行内块元素，具备行内块的特性。

7.由于子元素浮动后，它会脱离正常文档流，如果一个父元素里的子元素全部脱离的正常流，那么父元素如果没有明确设置一个≥子元素高度的height，则子元素会溢出。

清除浮动

浮动元素除了对父元素高度造成影响以外，它还会对它后面的元素造成影响。可以使用清除浮动来避免这种影响。有四种方法可清除浮动：

#father {
    width: 500px;
    background: black;
}

#son1 {
    float: left;
    width: 500px;
    height: 50px;
    background: #010056;
}

#footer {
    height: 50px;
    background: #ff6a00;
}

<div id="father">
    <div id="son1"></div>
</div>

<div id="footer"></div>

son1的父元素因为没有明确设置高度且自身因为浮动而脱离了标准文档流，所以父元素的高度为0。当footer受到son1的浮动影响后，footer会占据son1的位置。

解决方法1.

设定父div的高≥后代元素的总高度，这样父元素后面的兄弟元素就不再受浮动的影响。

#father{
    width:500px;
    height:50px;
    background:black;           
}

父元素有了高度后，footer就可以正常显示在father的下面

解决方法2

设置父元素的overflow，取值hidden、scroll、auto，三个取值在此处的效果是一样的，它使父元素可以根据子元素的总高度自动撑开自身。这种方式与明确设置父元素高度是完全一样的。

#father{
    width:500px;   
    overflow:hidden;
    background:black;           
}

比如常见的ul列表，一旦其li浮动，ul又没有明确设置≥li的高度，那么ul的高度会变成0。

解决方法3

在最后一个浮动元素的后面放一个空的盒子，设定其css的clear属性，取值有left、right、both。一旦使用了clear清除浮动影响后，父元素可以自动计算出它的高度去正确包裹住它的所有子元素。推荐使用这种方式清除浮动，好处在于它不但清除了son1对son2的影响，同时还使父元素有了高度。

<div id="father">
    <div id="son1"></div>
    <div style="clear:left;"></div>
    <div id="son2"></div>
</div>

<div id="footer"></div>

解决方法4

利用伪元素::after，这个伪元素是在父元素所包含的区域内的最后区域附加一个伪元素，用该伪元素清除浮动。

.box::after {
    content: "";
    display: block;
    clear: both;
}

<div id="father">
    <div id="son1"></div>   
    ::after被放在了此处
</div>

<div id="footer"></div>

解决方法5

在受浮动影响元素上设置overflow

#son2 {
    overflow:hidden;
    width:20px;
    height: 20px;
    background: green;
}

<div id="father">
    <div id="son1"></div>
    <div id="son2"></div>
</div>

<div id="footer"></div>

　　

Css - 学习总目录