CSS之浮动

时间：2019-03-11 12:48:38 收藏：0 阅读：167

一，首先谈谈块元素和内联元素

　　块元素特点：

　　　 1.为另起一行开始，独自占据一行，而其后元素从下一行开始显示。

　　　　2.关于元素的宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

　　　　3.块元素内可以容纳所有种类的元素，内联元素，块元素等。

　　内莱内元素特点：

　　　　1.和相邻的内联元素在同一行显示。

　　　　2.关于元素的高度，宽度不可控制，元素根据文本内容高宽来决定。

　　　　3.元素内边距，边框水平方向起作用但不影响布局，垂直方向起作用也影响布局（即可控）；元素的外边距只支持设置水平方向，垂直方向不可控制；

　　　　4.内联元素只能容纳文本以及其他内联元素，如果内联元素中包含了块元素，该块元素会另外一行开始显示。

二，为什么要有浮动

　　首先关于文档流：文档流处在网页的最底层，他表示的是页面中的一个位置，我们所创建的元素默认都处在文档流中

　　当需要块元素在文档流中水平排列时，可以使块元素脱离文档流。而此时可以使用float浮动，使元素脱离文档流。

三：设置浮动

　　浮动float包含的属性值：none，没有浮动（默认），left,元素脱离文档流向页面的左侧浮动，right,元素脱离文档流向页面的右侧浮动；

　设置浮动后特点：

　　　　1.元素会立即脱离文档流，元素脱离文档流后，它下边的元素立即向上移动

　　　　2.元素浮动以后，元素尽量往左上或者右上移动，直到遇到父级边界或者相邻的浮动元素才停下来

　　　　3.如果浮动元素上边有一个没有浮动的块元素，则浮动元素不会超过块元素

　　　　4.浮动元素不会超过它上边的兄弟元素，最多一边齐

　　　　5.浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果（最初有浮动的原因）

　　　　6.开启内联元素的浮动，会变为块元素。

　　　　7.提升层级半层

四：浮动带来的问题

　　高度塌陷：

 1 <html>
 2 <head>
 3     <meta charset="utf-8" />
 4     <title></title>
 5     <style type="text/css">
 6         .box1 {
 7             /*为box1设置一个边框*/
 8             border: 10px red solid;
 9 
10         }
11 
12         .box2 {
13             width: 100px;
14             height: 100px;
15             background-color: blue;
16             /*为子元素设置向左浮动*/
17             float: left;
18         }
19 
20         .box3 {
21             height: 100px;
22             background-color: yellow;
23         }
24     </style>
25 </head>
26 <body>
27     <div class="box1">
28         <div class="box2"></div>
29     </div>
30     <div class="box3"></div>
31 </body>
32 </html>

　　塌陷效果：

技术分享图片

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。

五：清除浮动

　　可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动。

.clearfix:after {
            /*添加一个内容*/
            content: "";
            /*转换为一个块元素*/
            display: block;
            /*清除两侧的浮动*/
            clear: both;
        }

　　例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box1 {
            border: 1px solid red;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: blue;

            float: left;
        }
        .clearfix:after {
            /*添加一个内容*/
            content: "";
            /*转换为一个块元素*/
            display: block;
            /*清除两侧的浮动*/
            clear: both;
        }
        /*
             * 在IE6中不支持after伪类,
             *     所以在IE6中还需要使用hasLayout来处理
             */

        .clearfix {
            zoom: 1;
        }
    </style>
</head>
<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>

</html>

技术分享图片

原文：https://www.cnblogs.com/ckafter/p/10509491.html