CSS之浮动以及清除浮动的几种方式

一. 什么是 CSS Float（浮动）

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

二.为什么需要浮动

想要把多个块级元素放在一行显示,打破常规布局.

使用行内块元素布局页面有一定的局限性,中间会有空白间隙.

实际开发中盒子之间间隙会有严格的要求哟..

三.浮动的作用

早期的作用：图文环绕

现在的作用：网页布局

场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右

浮动的代码

属性名：float

属性值：

四.浮动的特点

1.浮动元素会脱标，在标准流中不占位置

2.浮动元素比标准流高出半个级别，可以覆盖标准流中的元素

3.浮动找浮动(同方向浮动)，下一个浮动元素会在上一个浮动元素后面左右浮动

4.浮动元素会受到上面元素边界的影响

5.浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高

浮动布局注意事项:

1.浮动一般情况下和标准流的父盒子一起搭配使用.

♥先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2 浮动的时候,当父元素装不下浮动的子元素时,子元素会如何显示?

♥浮动时,当父元素装不下浮动的子元素时,此时此子元素会换行显示

3.一个元素浮动了，理论上其余的兄弟元素也要浮动,以防止引起问题?

♥浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

一浮全浮

4.浮动的元素不能使用text-align:center或者margin:0 auto属性

五. 浮动案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .header {
            height: 40px;
            background-color: #333;
        }

        .box {
            width: 1226px;
            height: 100px;
            background-color: pink;
            margin: 0 auto;
        }

        .banner {
            width: 1226px;
            height: 460px;
            background-color: red;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 460px;
            background-color: #ffa500;
        }

        .right {
            float: right;
            width: 992px;
            height: 460px;
            background-color: #87ceeb;
        }
    </style>
</head>

<body>
    <header class="header"></header>
    <div class="box"></div>
    <div class="banner">
        <div class="left"></div>
        <div class="right">
        </div>
    </div>
</body>

</html>

六.清除浮动的介绍

清除浮动指清除掉元素float属性。

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

七.清除浮动的方法 — ① 直接设置父元素高度

特点：

优点：简单粗暴，方便

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

八.清除浮动的方法 — ② 额外标签法

操作：

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

特点：

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

九.清除浮动的方法 — ③ 单伪元素清除法

操作：用伪元素替代了额外标签

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

特点：

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

十.清除浮动的方法 — ④ 双伪元素清除法

 .clearfix:after,.clearfix:before{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;
}

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

十一.清除浮动的方法 — ⑤ 给父元素设置overflow : hidden

操作： 直接给父元素设置 overflow : hidden
特点： 优点：方便

.fahter{
    overflow: hidden;
}