浮动元素高度问题
1.在标准流中内容的高度可以撑起父元素的高度
2.在浮动流中浮动的元素是不可以撑起父元素的高度的
清除浮动方式一
- 给前面一个父元素设置高度
注意点:在企业开发中, 我们能不写高度就不写高度, 所以这种方式用得很少
清除浮动方式二
- 给后面的盒子添加clear属性
clear属性取值:
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素
注意点:
当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效
清除浮动方式三：隔墙法
2.外墙法
- 2.1在两个盒子中间添加一个额外的块级元素
- 2.2给这个额外添加的块级元素设置clear: both;属性
注意点:
- 外墙法它可以让第二个盒子使用margin-top属性
- 外墙法不可以让第一个盒子使用margin-bottom属性
3.内墙法
- 3.1在第一个盒子中所有子元素最后添加一个额外的块级元素
- 3.2给这个额外添加的块级元素设置clear: both;属性
注意点:
- 内墙法它可以让第二个盒子使用margin-top属性
- 内墙法它可以让第一个盒子使用margin-bottom属性
4.外墙法和内墙法区别?
外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度
在企业开发中不常用隔墙法来清除浮动，因为外墙法和内墙法需要添加额外的空盒子，来设置样式，在企业开发中设置样式一般使用CSS
伪元素选择器
1.什么是伪元素选择器?
- 伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素
2.格式:
标签名称::before{
属性名称:值;
}
给指定标签的内容前面添加一个子元素
标签名称::after{
属性名称:值;
}
给指定标签的内容后面添加一个子元素
例如
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background-color: red;
}
div::before{
content: "爱你";
width: 50px;
height: 50px;
background-color: pink;
display: block;
}
div::after{
/*指定添加的子元素中存储的内容*/
content: "么么哒";
/*指定添加的子元素的宽度和高度*/
width: 50px;
/*height: 50px;*/
/*内容是可以超出标签的范围的, 所以高度为0依然可以看见内容*/
height:0;
background-color: pink;
/*指定添加的子元素的显示模式*/
display: block;
/*隐藏添加的子元素*/
visibility: hidden;
}
</style>
清除浮动的第四种方式
利用伪元素选择器清除浮动
本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样
注意点:IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性
清除浮动方式五:overflow: hidden;
1.overflow: hidden;作用
- 1.1可以将超出标签范围的内容裁剪掉
- 1.2清除浮动
- 1.3可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来
