CSS浮动属性的定义与清除干货分享

浮动概述

网页布局的本质就是用CSS来摆放盒子，CSS提供了3种传统布局方式：
普通流（标准流）—— 标签按默认方式排列。
浮动。
定位。

定义：float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：选择器 {float: 属性值;}
none —— 默认值，元素不浮动。
left —— 元素向左浮动。
right —— 元素向右浮动。

作用：如何让多个块级盒子水平排列成一行？如何实现两个块级盒子的左右对齐？

码农浅知-CSS浮动属性的定义与清除干货分享

总结：

任何元素都可以浮动，不管原先是什么模式的元素。
浮动最典型的运用就是可以让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

码农浅知-CSS浮动属性的定义与清除干货分享

浮动的特性

浮动特性分别是脱标、一行显示、行内块特征。

脱标：

定义：脱离标准流（浮）移动到指定位置（动），是浮动最重要的特性。
特点：浮动的盒子不再保留原先的位置。

一行显示：

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示（没有间隙）并且顶端对齐排列。
如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

行内块特征：

如果块级盒子没有设置宽度，添加浮动后，它的大小根据内容来定。
浮动的盒子中间没有缝隙。
行内元素同理。

码农浅知-CSS浮动属性的定义与清除干货分享

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #div1 {
                width: 200px;
                height: 100px;
                background-color: red;
            }

            #div2 {
                /*设置浮动*/
                width: 100px;
                height: 100px;
                background-color: blue;
                float: left;
            }

            #div3 {
                width: 200px;
                height: 100px;
                background-color: springgreen;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </body>
</html>

如何清除浮动

为什么要清除浮动？

我们会先定义标准流父盒子，在父盒子里面摆放浮动子盒子，但有的情况下不方便设置父盒子的高度，但父盒子高度为0时，由于浮动的子盒子不占位置，就会影响后面的标准流盒子。

码农浅知-CSS浮动属性详细学习笔记

语法：

选择器 { clear: 属性值;}

left —— 清除左侧浮动的影响。
right —— 清除右侧浮动的影响。
both —— 同时清除左右两侧浮动的影响（推荐）。

总结：

清除浮动的本质是清除浮动元素脱标造成的影响。
清除浮动的策略是闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

清除浮动的方法：

额外标签法：

定义：额外标签法（隔墙法）会在浮动元素末尾添加一个空的块级标签，例如div 或者br等（W3C推荐）。

1	<div style="clear: both"></div>

优点：通俗易懂，书写方便。
缺点：添加许多无意义标签，结构化较差。

父元素overflow：

定义：给父级元素添加overflow属性，将属性值设置为hidden、auto或scroll。
优点：代码简洁。
缺点：无法显示溢出的部分。

after伪元素：

定义：**:after**方式是额外标签法的升级版，在CSS样式中添加下图代码后，在父元素中调用类即可。

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/*IE 6 7 专有*/
.clearfix {
    *zoom: 1;
}

优点：没有增加标签，结构更简单。

缺点：照顾低版本浏览器。

双伪元素法：

定义：在CSS样式中添加下图代码后，在父元素中调用类即可。

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

/*IE 6 7 专有*/
.clearfix {
    *zoom: 1;
}