CCS样式----浮动-CFANZ编程社区

1、什么是浮动？

浮动属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。

float：left	在左侧浮动
float：right	在右侧浮动

浮动只能在水平方向进行，所以只有向左或向右两种方式。

2、浮动对元素的影响

2.1、对父元素的影响

当某个子元素设置元素浮动后，由于浮动会脱离文档流，所以父元素的宽度会塌陷至0。例如：

<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>
</head>
<style>
    div{
        border: 3px solid black;
    }
    .div1{
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }
</style>
<body>
<div>

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

可以看到在设置了浮动后，原本的子元素离开了文档流，导致无法将父元素的宽度撑起。

2.2、对同级元素的影响

当两个块级元素同时存在时，其中一个元素设置浮动后，将会出现类似绝对定位中的情况，浮动的块级元素会上移，未浮动的元素将会占据浮动元素原本的位置。

例如：

<!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>
</head>
<style>
    div{
        border: 3px solid black;
    }
    .div1{
        width: 200px;
        height: 200px;
        background-color: blue;
         float: left; 
         opacity: 0.4;
    }
    .div2{
        width: 200px;
        height: 200px;
        background-color: green;
    }
</style>
<body>
<div >

    <div class="div1">
      
    </div>
    <div class="div2">

    </div>
</div>
</body>
</html>

可以看到在设置了浮动后，原本的块级元素离开了文档流后，下方的块级元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层。

2.3、父元素对子元素的影响

当一个父元素被浮动时，子元素将撑起他的高度和宽度

例如：

<!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>
</head>
<style>
    div{
        border: 3px solid black;
        float: left;
    }
    .div1{
        width: 200px;
        height: 200px;
        background-color: blue;
         float: left; 
    }
    .div2{
        width: 200px;
        height: 200px;
        background-color: green;
        float: left; 
    
    }
    .div3{
        width: 200px;
        height: 200px;
        background-color:chartreuse;
    }
</style>
<body>
<div class="div">

    <div class="div1">
      
    </div>
    <div class="div2">

    </div>
    <div class="div3">

    </div>
    
</div>
</body>
</html>

3、如何消除浮动影响

3.1、使用Clear清除

Clear
Left	清除左侧浮动
Right	清除右侧浮动
Both	清除两侧浮动

使用clear进行消除有两种可用的办法，第一种为直接在div中添加，另一种为使用伪类选择器。

首先使用第一种方法举例，以2.1中例子进行示范：

<!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>
</head>
<style>
    div{
        border: 3px solid black;
    }
    .div1{
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }
    .div2{
        clear: left;
    }
</style>
<body>
<div>

    <div class="div1">
      
    </div>
    <div class="div2">

    </div>
</div>
</body>
</html>

可以看到在div中添加了clear后就消除了浮动元素带来的浮动影响。

使用第二种方法举例，以2.1中例子进行示范：

<!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>
</head>
<style>
    div{
        border: 3px solid black;
    }
    .div1{
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }
    div::after{
        content: '';
        display: block;
        clear: left;
    }
</style>
<body>
<div>

    <div class="div1">
      
    </div>
    <div class="div2">

    </div>
</div>
</body>
</html>

可以看到在使用伪类选择器后也消除了浮动元素带来的浮动影响。

3.2、建立BFC环境

　BFC—Block Formatting Context 块级格式化上下文，它是一个环境，是一个独立的渲染区域。但需要条件触发才能生成BFC环境。通常用overflow:hidden来触发BFC环境。

例如：

<!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>
</head>
<style>
    div{
        border: 3px solid black;
        overflow: hidden;
    }
    .div1{
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }
    div::after{
        content: '';
        display: block;
    }
</style>
<body>
<div>

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

可以看到我在没有使用clear的情况下使用overflow:hidden营造了BFC环境后也可以达到消除浮动影响的目的。