学习笔记-----css浮动总结

---

一、CSS浮动概念

1.浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
2.由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

二、css浮动

浮动特性
1. 浮动元素会脱离标准流(脱标)
2. 浮动的元素会一行内显示并且元素顶部对齐
3. 浮动的元素会具有行内块元素的特性

---

例1：

代码如下（示例）：

    <div class="box1">盒子1</div>
    <div class="box2">盒子2</div>
    <div class="box3">盒子3</div>

 <style>
        div {
    
    
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 1px dotted black;
            margin: 10px;
        }
        
        .box1 {
    
    
            float: right;
        }
    </style>

例2：

代码如下（示例）：

 <style>
        div {
    
    
            /*给所有盒子加左浮动*/
            float: right;
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 1px dotted black;
            margin: 10px;
        }
 </style>

例3：如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。

代码如下（示例）：

   <style>
        div {
    
    
            width: 600px;
            height: 100px;
            float: left;
            background-color: pink;
            border: 1px dotted black;
            margin: 10px;
        }
    </style>

例4：如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。

代码如下（示例）：

 <style>
        div {
    
    
            width: 600px;
            height: 400px;
            float: left;
            background-color: pink;
            border: 1px dotted black;
            margin: 10px;
        }
        .box2,
        .box3 {
    
    
            height: 300px;
        }
    </style>

三、css浮动清除

一、父级添加overflow: hidden；

代码如下（示例）：

 <ul>
        <li></li>
        <li></li>
 </ul>

 <style>
        li {
    
    
            list-style: none;
            height: 100px;
            width: 100px;
            float: left;
            background: red;
            margin-left: 20px;
        }
        ul {
    
    
        /*给父元素添加overflow: hidden;*/
            overflow: hidden;
            padding: 0;
            margin: 0;
            background: pink;
        }
    </style>

二、通过属性clear:both;达到清除浮动的目的
元素浮动后，只需要在浮动元素添加多一个块级元素，并添加clear: both;属性，便可以达到清除浮动的目的。

代码如下（示例）：

<ul>
        <li></li>
        <li></li>
        <div style="clear: both;"></div>
    </ul>

 <style>
        li {
    
    
            list-style: none;
            height: 100px;
            width: 100px;
            float: left;
            background: red;
            margin-left: 20px;
        }
        ul {
    
    
            padding: 0;
            margin: 0;
            background: pink;
        }
  </style>

三、通过给父级元素添加伪类after，达到清除浮动的目的；
这种方式也是使用clear: both;的方式达到效果，只是变相的使用了伪类after，使得页面结构更简洁，也是常用的清理浮动的方式。

代码如下（示例）：

<style>
    li {
    
    
        list-style: none;
        height: 100px;
        width: 100px;
        float: left;
        background: red;
        margin-left: 20px;
    }

    .cc:after {
    
    
        content: '';
        height: 0;
        line-height: 0;
        display: block;
        visibility: hidden;
        clear: both;
    }
    ul{
    
    
        background: pink;
    }
</style>

<ul class="cc">
    <li></li>
    <li></li>
</ul>

四、使用双伪类；

代码如下（示例）：

<style>
    li {
    
    
        list-style: none;
        height: 100px;
        width: 100px;
        float: left;
        background: red;
        margin-left: 20px;
    }
    
    .cc:after,
    .cc:before {
    
    
        content: "";
        display: block;
        clear: both;
    }
    
    ul {
    
    
        background: pink;
    }
</style>

<ul class="cc">
    <li></li>
    <li></li>
</ul>