day08--清除浮动的方式

1.在标准流中内容的高度可以撑起父元素的高度
2.在浮动流中浮动的元素是不可以撑起父元素的高度的

给前面的父盒子添加高度
没有设置宽度之前

image.png




    
    65-清除浮动方式一
    




    我是文字1
    我是文字1
    我是文字1



    我是文字2
    我是文字2
    我是文字2

清除浮动之后

image.png

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

clear属性取值:
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素

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




    
    66-清除浮动方式二
    



    我是文字1
    我是文字1
    我是文字1



    我是文字2
    我是文字2
    我是文字2

image.png

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

2.外墙法
2.1在两个盒子中间添加一个额外的块级元素
2.2给这个额外添加的块级元素设置clear: both;属性

注意点:
外墙法它可以让第二个盒子使用margin-top属性
外墙法不可以让第一个盒子使用margin-bottom属性

3.内墙法
3.1在第一个盒子中所有子元素最后添加一个额外的块级元素
3.2给这个额外添加的块级元素设置clear: both;属性

注意点:
内墙法它可以让第二个盒子使用margin-top属性
内墙法它可以让第一个盒子使用margin-bottom属性

4.外墙法和内墙法区别?
外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度

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




    
    67-清除浮动方式三
    




    我是文字1
    我是文字1
    我是文字1
    





    我是文字2
    我是文字2
    我是文字2

image.png

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

2.格式:
标签名称::before{
属性名称:值;
}
给指定标签的内容前面添加一个子元素

标签名称::after{
属性名称:值;
}
给指定标签的内容后面添加一个子元素




    
    68-伪元素选择器
    




    我是文字

image.png

1.清除浮动的第四种方式
利用伪元素选择器清除浮动
本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样

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




    
    69-清除浮动方式四
    




    我是文字1
    我是文字1
    我是文字1




    我是文字2
    我是文字2
    我是文字2

image.png

1.overflow: hidden;作用
1.1可以将超出标签范围的内容裁剪掉
1.2清除浮动
1.3可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来




    
    70-清除浮动方式五
    







    我是文字1
    我是文字1
    我是文字1




    我是文字2
    我是文字2
    我是文字2

image.png

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




    
    70-清除浮动方式五

image.png