浮动

网页会根据块元素或者内联元素的特性，按照从左至右，从上到下的方式自然排序！
这种元素自然排列的方式，我们称之为====》标准文档流！

浮动 float
左浮动
右浮动
浮动之后会脱离标准文档流

溢出 overflow
overflow:
01.visible:默认显示
02.scroll：以滚动条的形式显示溢出部分
03.hidden：溢出部分隐藏
04.auto：自动跳转

我们书写了一个页面，里面有很多块元素，默认排版就是标准文档流！

如果我们想让ul中的li能在一行显示！
01.display
02.浮动

只要是元素设置了浮动就会脱离标准文档流!
如果我们的父元素容不下浮动元素！
可以选择是否显示溢出的元素！
使用overflow!

clear 清除浮动
none 默认
left 在左侧不允许浮动
right 在右侧不允许浮动
both 左右侧都不允许浮动

防止父级边框塌陷的方式：
01.给父级盒子设置宽高！
02.在父级盒子的最后一个位置增加div没有内容
<div class="clear"></div>
给这个div增加样式
.clear{
border: 1px solid black;
clear: both;
}
03.在父盒子中设置溢出处理
overflow: hidden;
04.最终使用的方式 :after伪类
在父盒子中增加一个class="clear"
.clear:after{
display: block;/*在#main div的左后一个位置增加一个块元素*/
content: ''; /*块元素的内容什么都没有*/
clear: both; /*清除浮动*/
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>网页布局</title>
    <!-- 网页会根据块元素或者内联元素的特性，按照从左至右，从上到下的方式自然排序！
        这种元素自然排列的方式，我们称之为====》标准文档流！-->
</head>
<body>
   <span>11111</span>
   <span>22222</span>
   <span>33333</span>
   <div>33333</div>
   <span>11111</span>
   <span>22222</span>
   <span>33333</span>
</body>
</html>

网页布局

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>浮动属性</title>
    <style type="text/css">
        #main{/*大盒子*/
            height: 300px;
            width: 300px;
            border: 1px solid red;
            /*针对于浮动之后  内容溢出的处理
             overflow:
             01.visible:默认显示
             02.scroll：以滚动条的形式显示溢出部分
             03.hidden：溢出部分隐藏
             04.auto：自动调整
            */
            overflow: scroll;
        }

        #a,#b,#c{ /*三个小盒子*/
            height: 150px;
            width: 110px;
            border: 1px solid red;
            margin: 2px;
            /*浮动之后 会脱离 标准文档流*/
            float: right;
        }

    </style>

</head>
<body>
    <div id="main">
        <div id="a">这是第1个盒子</div>
        <div id="b">这是第2个盒子</div>
        <div id="c">这是第3个盒子</div>
    </div>
</body>
</html>

浮动属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>浮动属性</title>
    <style type="text/css">
        #main{/*大盒子*/
            height: 300px;
            width: 300px;
            border: 1px solid red;
        }

        #a,#b,#c{ /*三个小盒子*/
            height: 50px;
            width: 70px;
            border: 1px solid blue;
            margin: 2px;
            float: left;
        }/*第三个盒子清除左浮动
        #c{
            clear: left;
        }*/
        /*清除第二盒子的左浮动*/
        #b{
            clear: left;
        }

    </style>

</head>
<body>
    <div id="main">
        <div id="a">这是第1个盒子</div>
        <div id="b">这是第2个盒子</div>
        <div id="c">这是第3个盒子</div>
    </div>
</body>
</html>

清除浮动属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>防止父级边框塌陷</title>

    <style type="text/css">
        #main{
            border: 1px solid red;
            /*01.给父级div设置高度
            height: 500px;*/
            /* 03. 设置溢出处理 overflow: hidden;*/
        }

        #a,#b,#c{ /*三个小盒子*/
            border: 1px solid red;
            float: left; /* 01.因为 父级div没有设置高度和宽度！  子的div右浮动了？脱离文档流   位置没了*/
        }

        /*02. 增加空div  防止父级边框塌陷
        .clear{
            border: 1px solid black;
            clear: both;
        }*/

        /*04.推荐使用  after伪类 */
        .clear:after{
            display: block;/*在#main div的左后一个位置增加一个块元素*/
            content: '';   /*块元素的内容什么都没有*/
            clear: both;  /*清除浮动*/
        }
    </style>
</head>
<body>
<div id="main" class="clear">
    <div id="a"><img src="../images/b.png"></div>
    <div id="b"><img src="../images/b.png"></div>
    <div id="c"><img src="../images/b.png"></div>
    <!--02. 增加空div  防止父级边框塌陷    <div  class="clear"></div> -->
</div>
</body>
</html>

防止父级边框塌陷