另外的清除浮动方式 

隔墙法：
1.外墙法：在两个盒子中间添加一个额外的块级元素，给额外添加的块级元素设置clear：out;属性
Notice：外墙法不可以让第一个盒子使用margin-bottom属性。
2.内墙法：在第一个盒子中所以子元素最后面添加一个额外的块级元素，给额外添加的块级元素设置clear：out;属性
Notice：内墙法可以让第一个盒子使用margin-bottom属性。  
外墙法不能撑起第一个盒子的高度，内墙法可以。
无论是外墙法还是内墙法都需要添加一个额外的块级元素并且设置clear:out;,开发中不常用。
伪元素选择器
作用：给指定标签的内容前面添加一个子元素，或者给指定标签的内容后面添加一个子元素
div::before/div::after: 给指定标签前/后面添加一个子元素
overflow作用：可以将超出范围的内容裁减掉/清除浮动。
可以通过overflow:hidden: 让里面的盒子设置margin-top之后，外面的盒子不被顶下来
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动方式4</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
            /*margin-bottom: 10px;*/
        }
        .box2{
            background-color: green;
            /*margin-top: 10px;*/
        }
        .box1 p{
            width: 100px;
            background-color: blue;
        }
        .box2 p{
            width: 100px;
            background-color: yellow;
        }
        p{
            float:left ;
        }
        .box1::after{
            content: "";
            /*设置添加的子元素内容为0*/
            display: block;
            /*设置子元素为块级元素*/
            height: 0;
            /*设置子元素高度为0*/
            visibility: hidden;clear: both;
            /*设置可见度看不见*/
            clear;both;
        }
    </style>

</head>
<body>
<!--

-->
<div class="box1">
    <p>秦怡大傻瓜1</p>
    <p>秦怡大傻瓜1</p>
    <p>秦怡大傻瓜1</p>
</div>

<!--<div class="wall h20" ></div>-->

<div class="box2">
    <p>秦怡大傻瓜2</p>
    <p>秦怡大傻瓜2</p>
    <p>秦怡大傻瓜2</p>
</div>
</body>
</html>
posted @ 2017-04-10 13:12  小程序洋  阅读(596)  评论(0)    收藏  举报