汇总CSS布局技巧————浮动

一、标准流

又称文档流，是浏览器在渲染页面内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。

常见标准流排版规则：

块级元素：从上到下，垂直布局 ，独占一行
行内元素或行内块元素：从左到右，水平布局 ，空间不够自动折行

二、浮动

2.1浮动的作用

早期的作用：图文环绕

现在的作用：网页布局场景：让垂直布局的盒子变成水平布局

2.2浮动的代码

属性名：float

属性值： left——左浮动； right——右浮动

2.3浮动的特点

浮动元素会脱离标准流（简称：脱标），在标准流中不占位置 ，相当于漂浮在标准流之上
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果：一行可以显示多个；可以设置宽高

注意点：浮动元素不能通过text-alilgn:center 或者 margin:0 auto

2.4浮动的案例

<style>
    .left {
        float: left;
        background-color: aliceblue;
     }
     .right {
         float: left;
         background-color: aqua;
     }
     .right>div {
         float: left;
         background-color: pink;
         margin-left: 14px;
         margin-bottom: 14px;
     }
</style>
<body>
 <div class="box">
        <div class="left">zuo</div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
</body>

结果如下：

三、清除浮动

3.1清除浮动的介绍

浮动浮动带来的影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
原因：子元素浮动后脱标 ——> 不占位置
目的：需要父元素有高度，从而不影响其他网页元素的布局

3.2清除浮动的方法

（1）直接设置父元素高度

优点：简单粗暴，方便

缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

（2）额外标签法

操作：

在父元素内容的最后添加一个块级元素
给添加的块级元素设置 clear:both

缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

（3）单伪元素清除法

操作：用伪元素代替了额外标签基本写法：

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

补充写法：

.clearfix::after{
    content:'';
    display:block;
    clear:both;
    /*补充代码：在网页中看不到伪元素*/
    height:0;
    visibility:hidden;
}

优点：项目中使用，直接给标签加类即可清除浮动

（4）双伪元素清除法

操作：

.clearfix::before,
.clearfix::after{
    content:'';
    display:table;
}
.clearfix::after{
    clear:both;
}