清除浮动

清除浮动

用以下两个盒子为例：

   <div class="box1">

        <p>我是文字1</p>

        <p>我是文字1</p>

        <p>我是文字1</p>

    </div>

    <div class="box2">

        <p>我是文字2</p>

        <p>我是文字2</p>

        <p>我是文字2</p>

    </div>

 

        .box1 p {

            width: 100px;

        }

        .box2 p {

            width: 100px;

        }

        p {

            float: left;

        }

---

清除浮动方式一

1.清除浮动的第一种方式：给前面一个父元素设置高度

    box1 { height: 20px;}

注意点:

在企业开发中,我们能不写高度就不写高度, 所以这种方式用得很少

---

清除浮动方式二

1.清除浮动的第二种方式：给后面的盒子添加clear属性

    .box2 {clear: both;}

clear属性取值:

    none:默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)

    eft:不要找前面的左浮动元素

    right:不要找前面的右浮动元素

    both:不要找前面的左浮动元素和右浮动元素

注意点:

当我们给某个元素添加clear属性之后, 那么这个元素的margin属性就会失效

---

清除浮动方式三(理解)

1.清除浮动的第三种方式：隔墙法

2.外墙法

    2.1在两个盒子中间添加一个额外的块级元素

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

    2.2给这个额外添加的块级元素设置clear: both;属性

           .wall{

                clear: both;

            }

            .h20{

                height: 20px;

            }

注意点:

外墙法它可以让第二个盒子使用margin-top属性

外墙法不可以让第一个盒子使用margin-bottom属性

3.内墙法

    3.1在第一个盒子中所有子元素最后添加一个额外的块级元素

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

    3.2给这个额外添加的块级元素设置clear: both;属性

        样式同上

注意点:

内墙法它可以让第二个盒子使用margin-top属性

内墙法它可以让第一个盒子使用margin-bottom属性

4.外墙法和内墙法区别?

外墙法不能撑起第一个盒子的高度,而内墙法可以撑起第一个盒子的高度

5.在企业开发中不常用隔墙法来清除浮动

---

清除浮动方式四(理解)

1.清除浮动的第四种方式

利用伪元素选择器清除浮动

本质上就是内墙法,只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样

注意点：IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性

 .box1::after{

            /*设置添加的子元素的内容为空*/

            content: "";

            /*设置添加的子元素为块级元素*/

            display: block;

            /*设置添加的子元素的高度为0*/

            height: 0;

            /*设置添加的子元素看不见*/

            visibility: hidden;

            /*给添加的子元素设置clear: both;*/

            clear: both;

        }

---

伪元素选择器(掌握)

1.什么是伪元素选择器?

伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素

2.格式:

（1）给指定标签的内容前面添加一个子元素：

标签名称::before{

属性名称:值;

}

（2）给指定标签的内容后面添加一个子元素：

标签名称::after{

属性名称:值;

}

例如：

div::after{

            /*指定添加的子元素中存储的内容*/

            content: "么么哒";

            /*指定添加的子元素的宽度和高度*/

            width: 50px;

            /*height: 50px;*/

            /*内容是可以超出标签的范围的, 所以高度为0依然可以看见内容*/

            height:0;

            pink;

            /*指定添加的子元素的显示模式*/

            display: block;

            /*隐藏添加的子元素*/

            visibility: hidden;

        }

---

清除浮动方式五(理解)

1.overflow: hidden;

    overflow: hidden;  的作用

        1.1可以将超出标签范围的内容裁剪掉

        1.2清除浮动

        1.3可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来

.box1{

            overflow: hidden;

            *zoom:1;

        }

补充：

    zoom:1;属性是IE浏览器的专有属性

    表示缩放比例，zoom本身就是属性

    zoom：1就是和原来一样大小

 

以上内容是在看视频的时候总结的，有什么不对的地方，希望指出。