CSS基础学习
一、清除浮动的方式：
1. 清除浮动方式一（ 给前面一个父元素设置高度）：
注意：在企业开发中，能不写高度就不写高度，所以此方法应用较少，仅作为了解
2. 清除浮动方式二（给后面的盒子添加clear属性）：
clear属性取值：
none 默认取值，按照默认的浮动元素排序规则
left 不找前面左浮动的元素
right 不找前面有浮动的元素
both 不找前面的左浮动元素和右浮动元素
注意：当我们给某个元素添加clear属性后，该元素的margin属性就会自动失效
2.1 margin属性失效的原因：
是由于它的父元素没有边框属性
2. 清除浮动方式三（隔墙法）：
**
2.1 外墙法
方法：
（1）在两个盒子之间添加一个额外块级元素，一般使用div
（2）给这个额外添加的块级元素设置clear:both;属性
注意：外墙法可以让第二个盒子使用margin-top属性，但不可以让第一个盒子使用margin-bottom属性
PS：一般设置额外添加的那个盒子的高度等来实现margin
2.2 内墙法
方法：
（1）同样是添加一个额外的块级元素，只不过这次添加到第一个盒子中所有子元素最后的位置
（2）然后设置clear:both;属性即可
注意：内墙法与外墙法不同，可以让第二个盒子使用margin-top属性，也可以让第一个盒子使用margin-bottom属性，同时也可以通过设置额外添加的块级元素的高度等来实现margin
2.3 内、外墙法之间的区别：
外墙法不能撑起第一个盒子的高度，而内墙法可以
PS:在企业开发中不常用隔墙法来清除浮动
3. 伪元素选择器：
1. 什么是伪元素选择器？
作用：给指定标签的内容前面添加一个子元素，或者给指定标签的内容后面添加一个子元素
示例格式：
<style>
div::before{
content:"xx";
<!---指定添加的子元素中存储的内容->
width:50px;
<!--指定添加的子元素的宽度和高度-->
display:block;
<!--指定添加的子元素的显示模式-->
visibility:hidden;
<!--可以隐藏添加的子元素-->
}
div::after{
content:"xx";
width:50px;
display:block;
}
</style>
4. 清除浮动方式四（利用伪元素选择器，可以理解为内墙法plus）：
部分关键代码：
<style>
.box1::after{
content:"";/*设置添加的子元素的内容为空*/
display:block;/*设置添加的子元素为块级元素*/
height:0;/*设置添加的子元素的高度为0，不占用空间*/
visibility:hidden;/*设置添加的子元素无法被看见*/
clear:both;/*给添加的子元素设置clear:both;属性*/
}
.box1{
*zoom:1;/*用来兼容IE6浏览器*/
}
</style>
5. 清除浮动方式五（利用overflow: hidden;属性）：
5.1 overflow: hidden;属性的作用：
（1）可以将超出标签范围的内容裁减掉
（2）清除浮动
（3）可以通过overflow: hidden;属性让里面的盒子设置margin-top之后，外面的盒子不被顶下来
**5.2 如何利用overflow: hidden;属性来清除浮动？
**
直接给第一个盒子添加overflow: hidden;属性即可
注意：IE6的兼容问题