CSS Float(浮动)

1.基本的浮动布局

浮动布局可以让块级元素自左向右（或自右向左）的排列在同一行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        li{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            float: left;
        }
    </style>
    <body>
        <ul>
            <li style="background-color: blue;">1</li>
            <li style="background-color: red;">2</li>
            <li style="background-color: green;">3</li>
            <li style="background-color: pink;">4</li>
        </ul>
    </body>
</html>

行内元素浮动之后可以设置宽高

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        a{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            float: left;
            text-decoration: none;
        }
    </style>
    <body>
        <div>
            <a href="javascript:;" style="background-color: lightblue;">1</a>
            <a href="javascript:;" style="background-color: red;">2</a>
            <a href="javascript:;" style="background-color: green;">3</a>
            <a href="javascript:;" style="background-color: pink;">4</a>
        </div>
    </body>
</html>

2.浮动对父元素的影响

浮动元素无法撑开父级元素高度，导致父元素背景不能显示，边框不能撑开。需要在父元素中设置overflow: hidden

3.浮动对兄弟元素的影响

浮动元素与行内元素
浮动元素与块级元素

如果块级元素在浮动元素的前面，则没有什么影响，浮动元素会从下一行开始展示。

如果块级元素在浮动元素的后面，浮动元素会浮在块级元素上面，同时块级元素的文本会被挤到下一行

4.清除浮动

设置清浮动的样式

.clearfix::before,
.clearfix::after {
    content: "";
    display: block;
    height: 0;
    line-height: 0px;
    clear: both;
    visibility: hidden;
}

父元素使用这个样式可以撑开高度

<ul class="clearfix">
    ...
</ul>