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>
解决浮动影响效果

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,101评论 1 91
  • 这篇文章极好,以至于让我受益良多,就一字没有改动的转发过来一丝冰凉老师的文章 需要注意的是,display:tab...
    新晋小牛牛阅读 407评论 0 2
  • 从业三年,项目无数,现在回过头来,想要把一些重要的知识用白话整理出来:这个东西是什么?怎样才是最佳实践?希望对自己...
    齐修_qixiuss阅读 35,606评论 18 198
  • 今天早起起晚了,赶紧叫闺女,小家伙很给力迅速起床穿衣服,刷牙洗脸很快就做完了,虽然起的有点晚,但是没有拖拖拉...
    DDALG阅读 22评论 0 0
  • 阿叔,侄女好想你呀!! 你可以更随意忘记我,喊我忘记你:我办不到呀!这是过了这么久我还是这句话! 好不争气呀我!居...
    基__250303阅读 124评论 0 0