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

作者: 艾曼大山 | 来源:发表于2019-05-10 10:55 被阅读84次

CSS浮动的使用和解决浮动的五种方法
一篇文章带你了解CSS clear both清除浮动
1-浮动
css清除浮动的三种方法
浅谈CSS关于清除浮动的三种方法
CSS clear both清除浮动
CSS浮动续
解释下浮动和它的工作原理？清除浮动的方法
css定位
CSS 定位

浮动

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

demo地址: https://github.com/pengjunshan/WebPJS

其它Web文章
Html+Css基础学习第一章
 CSS基础学习之第二章
待续......

本编文章会讲到的知识点

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

普通流

普通流 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>

解决浮动影响效果

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

CSS浮动的使用和解决浮动的五种方法
浮动网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？CSS的摆放盒子的方式有3种：普通流...
一篇文章带你了解CSS clear both清除浮动
一、前言 CSS clear both清除产生浮动，使用了css float浮动会产生css浮动，这个时候就需要...
1-浮动
css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？ http://blog.csdn.net...
css清除浮动的三种方法
摘要：css清除浮动float的三种方法总结，为什么要清除浮动？浮动会有哪些影响？一.先看现象（display：...
浅谈CSS关于清除浮动的三种方法
浅谈CSS关于清除浮动的三种方法 CSS中，因为布局需要，我们常常希望出现一些浮动布局，比如图文环绕。这些浮动布局...
CSS clear both清除浮动
原文地址：CSS clear both清除浮动 DIV+CSS clear both清除产生浮动我们知道有时使用了...
CSS浮动续
CSS清除浮动案例 CSS版心居中显示案例清除浮动的四种用法： 1. 使用空标记清除浮动，隔墙法，增加标签 2....
解释下浮动和它的工作原理？清除浮动的方法
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。 1、使用空标签清除浮动这种方法...
css定位
CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...
CSS 定位
CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...