CSS浮动的使用和解决浮动的五种方法

浮动

网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？
CSS的摆放盒子的方式有3种：普通流（标准流）盒子模型、浮动和定位。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

案例地址: https://github.com/pengjunshan/WebPJS/HtmlCss

其它Web文章
Html+Css基础学习第一章
 CSS基础学习之第二章
 CSS定位relative、absolute、fixed使用总结
 原生开发WebApi知识点总结
 开发中常用jQuery知识点总结
 C3动画+H5+Flex布局使用总结
 ES6常用知识总结
 Vue学习知识总结
 开发环境到生产环境配置webpack
待续......

本编文章会讲到的知识点

普通流
浮动介绍
浮动的特性
浮动实现常见的布局方式
清除浮动的影响

普通流

普通流 normal flow，这个单词很多人翻译为文档流，字面翻译普通流或者标准流都可以。
普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现意外外的情况叫做普通流布局。

浮动介绍

为什么需要浮动？

浮动的目的，就是为了更好的实现排列布局。在标准流中，也可以实现排列布局，但是存在问题，比如三个div盒子怎么横排一列？

理想效果

标准流实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            display: inline-block;
        }
        .l,.r{
            width: 100px;
            height: 100px;
            background: gray;
        }
        .c{
            width: 200px;
            height: 100px;
            background: gold;
        }
    </style>
</head>
<body>
    <div class="l">左</div>
    <div class="c">中</div>
    <div class="r">右</div>
</body>
</html>

标准流处理效果

浮动实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            float: left;
        }
        .l,
        .r {
            width: 100px;
            height: 100px;
            background: gray;
        }
        .c {
            width: 200px;
            height: 100px;
            background: gold;
        }
    </style>
</head>
<body>
    <div class="l">左</div>
    <div class="c">中</div>
    <div class="r">右</div>
</body>
</html>

浮动处理效果

浮动的使用方式

语法	作用	示例
float: left;	左浮动	div {float: left;}
float: right;	右浮动	div {float: right;}

浮动的特性

特点一：脱离标准文档流[普通流]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .one {
            width: 100px;
            height: 100px;
            background: blue;
            float: left;
        }
        .two {
            width: 300px;
            height: 200px;
            background: gold;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

</html>

浮动元素脱离文档流

特点二：浮动找浮动

浮动找浮动（一定是多个连续浮动的盒子）。
案例中浮动2、3、4都浮动不占据位置了，脱离了文档流所以5自然就上去了和1的底部并起。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .one,.five{
            width: 400px;
            height: 300px;
            background: blue;
        }
        .two,.three,.four{
            width: 100px;
            height: 100px;
            background: gold;
            border:1px solid red;
            float: left;
        }
    </style>
</head>
<body>
        <div class="one">没有浮动1</div>
        <div class="two">浮动2</div>
        <div class="three">浮动3</div>
        <div class="four">浮动4</div>
        <div class="five">没有浮动5</div>
</body>
</html>

浮动找浮动

特点三：多个浮动的元素，以顶部基准对齐

多个浮动的元素（一定是多个连续浮动的元素）,不管浮动元素的高是否相等，都以顶部基准对齐。

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

<head>
    <meta charset="utf-8">
    <style>
        .one,
        .five {
            width: 300px;
            height: 300px;
            background: gold;
            border: 1px solid blue;
        }

        .two,
        .three,
        .four {
            width: 50px;
            height: 50px;
            background: red;
            border: 1px solid pink;
            float: left;
        }

        .three {
            height: 100px;
            width: 80px;
        }

        .four {
            height: 20px;
            width: 60px;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
</body>

</html>

多个浮动的元素，以顶部基准对齐

浮动会改变元素的显示模式

浮动后的元素变成了行内块元素。

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

<head>
    <meta charset="utf-8">
    <style>
        span {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background: gold;
            /* 
                    浮动会改变元素的显示模式，变为行内块级元素
                 */
            float: left;
        }
    </style>
</head>

<body>
    <span>aaaaaa</span>
    <span>bbbbbb</span>
</body>

</html>

浮动改变元素显示模式

文字环绕浮动的元素

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            div {
                width:800px;
                border:1px solid #666;
                margin: 0 auto;
            }
            img {
                width:300px;
                float:right;
                margin:10px;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="../../../img/jj.png" >你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
            瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
            瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
            瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
            瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
            瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
            瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
            瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
            瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
            瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
            瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
            瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
            瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
            瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
            瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，瞅你咋地你瞅啥，
        </div>
    </body>
</html>

文字环绕浮动元素

清除浮动的影响

为什么要清除浮动的影响

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动的影响。
看下图，在蓝色盒子浮动的情况下黑色盒子会上浮，这种效果并不是我们想要的。

浮动的影响

清除浮动影响的方式

方式一：给父元素增高

缺点：在实际开发中，对于显示的内容的区域，一般情况高度不能写死，因为内容显示的数量不确定。所以对于内容区域显示的高度，应当由内容自适应。

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

<head>
   <meta charset="utf-8">
   <style>
       * {
           margin: 0;
           padding: 0;
       }
       .father,
       .uncle {
           width: 1200px;
           margin: 0 auto;
       }
       .father {
           border: 1px solid;
           height: 200px; 
       }
       .father .son {
           height: 200px;
           background: blue;
           border: 1px solid red;
       }
       .father .son1 {
           width: 300px;
           float: left;
       }
       .father .son2 {
           width: 890px;
           float: right;
       }
       .uncle {
           height: 300px;
           background: #000;
       }
   </style>
</head>

<body>
   <div class="father">
       <div class="son son1"></div>
       <div class="son son2"></div>
   </div>
   <div class="uncle"></div>
</body>

</html>

方式二：样式属性clear

内隔墙法：在父元素的内部最后一行设立一道墙（设立一个div）对所设立的墙，添加一个样式属性clear:both;外隔墙法：在父元素外部设立一道墙（设立一个div）对所设立的墙，添加一个样式属性clear:both;
缺点：每次清除浮动都要加一个标签，当一个页面清除浮动比较多时，冗余的标签也会越来越多。文件就会越来越大，传输的速度相对来说越来越慢，影响程序的性能。

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

<head>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father,
        .uncle {
            width: 1200px;
            margin: 0 auto;
        }

        .father {
            border: 1px solid;
        }

        .father .son {
            height: 200px;
            background: blue;
        }

        .father .son1 {
            width: 300px;
            float: left;
        }

        .father .son2 {
            width: 890px;
            float: right;
        }

        .uncle {
            height: 300px;
            background: #000;
        }

        .clearfix {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son son1"></div>
        <div class="son son2"></div>
        <!-- 
                内隔墙法，就是在父元素的内部最后一行添加一个块级标签
                给这个块级标签设定一个样式属性:
                    clear:left|right|both
             -->
        <div class="clearfix"></div>
    </div>
    <!--外隔墙法：
         在父元素外部设立一道墙（设立一个div）
         对所设立的墙，添加一个样式属性clear:both-->
    <div class="clearfix"></div>
    <div class="uncle"></div>
</body>

</html>

方式三：样式属性overflow:hidden;

给父元素加上一个overflow:hidden就是可以清除浮动的影响。
缺点：这是一个偏方，虽然可以达到清除浮动的影响的效果，但是若父元素中有【定位】（后面讲），会把溢出的部分给隐藏掉。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            * {
                margin:0;
                padding: 0;
            }

            .father,.uncle {
                width:1200px;
                margin:0 auto;
            }

            .father {
                border:1px solid;
                /* 可以清除浮动影响的样本属性 */
                overflow:hidden;
            }

            .father .son {
                height:200px;
                background:blue;
            }

            .father .son1 {
                width:300px;
                float:left;
            }

            .father .son2 {
                width:890px;
                float:right;
            }

            .uncle {
                height:300px;
                background:#000;
            }

            .clearfix {
                clear:both;
            }

        </style>
    </head>
    <body>
        <div class="father">
            <div class="son son1"></div>
            <div class="son son2"></div>
        </div>

        <div class="uncle"></div>
    </body>
</html>

方式四：:after伪元素

借助给父元素加:after伪元素实现（本质上是在模拟内隔墙法）,
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {zoom: 1;} / IE6、7 专有 */

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            * {
                margin:0;
                padding: 0;
            }

            .father,.uncle {
                width:1200px;
                margin:0 auto;
            }

            .father {
                border:1px solid;
            }

            .father .son {
                height:200px;
                background:blue;
            }

            .father .son1 {
                width:300px;
                float:left;
            }

            .father .son2 {
                width:890px;
                float:right;
            }


            .uncle {
                height:300px;
                background:#000;
            }

            .clearfix {
                clear:both;
            }

            .clearfix:after {
                /* 
                    伪元素默认是行内元素
                 */
                content:".";
                clear:both;
                display:block;
                height:0;
                visibility:hidden;
            }

            .clearfix {
                 /* IE6、7 专有 */
                *zoom:1;
            }
        </style>
    </head>
    <body>
        <div class="father clearfix">
            <div class="son son1"></div>
            <div class="son son2"></div>
        </div>
    
        <div class="uncle"></div>
    </body>
</html>

方式五：使用before和after双伪元素清除浮动

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

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

<head>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father,
        .uncle {
            width: 1200px;
            margin: 0 auto;
        }

        .father {
            border: 1px solid;
        }

        .father .son {
            height: 200px;
            background: blue;
        }

        .father .son1 {
            width: 300px;
            float: left;
        }

        .father .son2 {
            width: 890px;
            float: right;
        }


        .uncle {
            height: 300px;
            background: #000;
        }

        .clearfix {
            clear: both;
        }

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

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }
    </style>
</head>

<body>
    <div class="father clearfix">
        <div class="son son1"></div>
        <div class="son son2"></div>
    </div>
    <div class="uncle"></div>
</body>

</html>

解决浮动影响效果

实际工作中浮动使用还是很多的，刚开始学习的时候被浮动搞得一脸懵逼，记录下来大家一起看。

最后编辑于：2020.04.07 09:24:17

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 157,924评论 4赞 360
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 66,902评论 1赞 290
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 107,716评论 0赞 239
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,783评论 0赞 203
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,166评论 3赞 286
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,510评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,784评论 2赞 311
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,476评论 0赞 196
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,196评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,459评论 2赞 243
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 31,978评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,321评论 2赞 252
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,964评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,046评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,803评论 0赞 193
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,530评论 2赞 271
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,420评论 2赞 265

CSS浮动的使用和解决浮动的五种方法

浮动

本编文章会讲到的知识点

普通流

浮动介绍

为什么需要浮动？

浮动的使用方式

浮动的特性

特点一：脱离标准文档流[普通流]

特点二：浮动找浮动

特点三：多个浮动的元素，以顶部基准对齐

浮动会改变元素的显示模式

文字环绕浮动的元素

清除浮动的影响

为什么要清除浮动的影响

清除浮动影响的方式

方式一：给父元素增高

方式二：样式属性clear

方式三：样式属性overflow:hidden;

方式四：:after伪元素

方式五：使用before和after双伪元素清除浮动

推荐阅读更多精彩内容