清除浮动的方法
- 1.给父元素加高度
- 但是子元素的高度如果超出父元素的话，父元素也要跟着修改
- 2.在父元素下面加一行div块，clear：both。
- 就会显示父元素，就不会塌陷，但是代码行会变多，并且每个父元素都要加，比较繁琐
- 3.用伪元素代替多余的标签
伪元素选择器
伪类选择器只有一个：冒号；伪元素选择器有两个冒号：：
<style>
.box::before{
color: red;
content: "hello";
font-size: 50px;
}
.box::after{
content: "world";
color: yellow;
font-size: 60px;
}
</style>
</head>
<body>
<div class="box">大家好</div>
</body>
：：before
：：after
定义一个clear属性，清除浮动（伪元素清除浮动）
.box::after {
content: "";
visibility: hidden;
height: 0;
clear: both;
display: block;
}
.box {
background-color: aqua;
width: 960px;
}
.box .left {
background-color: red;
width: 300px;
height: 300px;
float: left;
}
.box .right {
background-color: violet;
width: 300px;
height: 300px;
float: right;
}
</style>
</head>
<body>
<div class="box clear">
<div class="left"></div>
<div class="right"></div>
</div>
双伪元素清除法
.clear::before,
.clear::after {
content: '';
/*类似于table 作为块级表格来显示
表格前后有换行符 */
display: table;
}
.clear::after {
clear: both;
}
给父元素设置overflow：hidden（较少用）
- 直接给父元素添加overflow：hidden属性
- .clear{overflow:hidden}
- 方便，内容溢出就隐藏
BFC
- 块格式化上下文。一个规则
- 触发BFC会独立出来一个渲染区域，让处于BFC内部的元素与外部的元素相隔离，使内外元素不会相互受影响。
- 怎么触发BFC
- 浮动元素float属性为left/right
- 定位元素position属性为absolute和fixed
- 行内块元素 是BFC盒子
- html标签是BFC盒子
- overflow属性取值不为visible，如auto，hidden
- BFC盒子的特点：
- BFC盒子会默认包裹住内部子元素（标准流，浮动）---应用 清除浮动
- BFC盒子本身与子元素之间不存在margin的塌陷问题---应用margin塌陷
