2017-02-21 CSS学习笔记 am

浮动元素高度问题

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

清除浮动方式一

• 第一种方式
  给前面一个父元素设置高度

注意点：
在企业开发中，我们能不设高度就不设高度，所以这种方式用的很少

 .box1{
            height: 20px;
            background-color: red;
        }
        .box2{
            background-color: green;
        }

清除浮动方式二

• 清除浮动的第二种方式
  给后面的盒子添加 clear 属性
  clear 属性取值：
  none : 默认取值
  按照浮动元素的排序规则来排序（左浮动找左浮动，右浮动找右浮动）
  left:不要找前面的左浮动元素
  right:不要找前面的右浮动元素
  both:不要找前面的左浮动元素和右浮动元素
  注意点：
  当我们给某个元素添加 clear 属性之后，那么这个属性的 margin 属性就会失效

.box2{
          background-color: green;
            clear: both;
            margin-top: 28px;
}

清除浮动方式三

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

.wall{
            clear: both;
        }

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

• 内墙法

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

• 给这个额外添加的块级元素设置 clear:both; 属性
  注意点
  内墙法它可以让第二个盒子使用 Margin-top 属性

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

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

搜狐网页有隔墙法使用

.wall{
            clear: both;
        }
/*块级在第一个元素中*/

伪元素选择器

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

标签名称::before{
         属性名称:值;
}

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

标签名称::after{
          属性名称:值;
}

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

div::before{
            content: "爱你";
            width: 50px;
            height: 50px;
            background-color: pink;
            display: block;
        }

div::after{
            content: "么么哒";
            width: 50px;
            height: 50px;
            background-color: pink;
            display: block;
        }

清除浮动方式四

• 清除浮动的第四种方式
  利用伪元素选择器清除浮动，本质上就是内墙法，只不过是直接通过 CSS 代码添加了内墙，其他特性和内墙法都一样
  注意点
  IE6 中不支持这种方式，为了兼容 IE6 必须给父元素添加 *zoom:1;属性

.box1::after{
            /*设置添加的子元素的内容为空*/
            content: "";
            /*设置添加的子元素为块级元素*/
            display: block;
            /*设置添加的子元素的高度为0*/
            height: 0;
            /*设置添加的子元素看不见*/
            visibility: hidden;
            /*给添加的子元素设置clear: both;*/
            clear: both;
}
 .box1{
            /*兼容IE6*/
            *zoom:1;
        }

清除浮动方式五

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