1.清除浮动---高度塌陷问题
clear属性可以用于清除元素周围的浮动对元素的影响。 • 也就是元素不会因为上方出现了浮动元素而改变位置。 • 可选值： – left：忽略左侧浮动 – right：忽略右侧浮动 – both：忽略全部浮动 – none：不忽略浮动，默认值
<!-- html5 声明 必须要用 -->
<!DOCTYPE html>
<html lang="ch">
<head>
<!-- 网页编码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="德龙科技,智能照明,施耐德knx,物联网4G">
<meta name="description" content="掘金是一个帮助开发者成长的社区,是给开发者用的 Hacker News,给设计师用的 Designer News,和给产品经理用的 Medium。掘金的技术文章由稀土上聚集的技术大牛和极客共同编辑为你筛选出最优质的干货,其中包括：Android、iOS、前端、后端等方面的内容。用户每天都可以在这里找到技术世界的头条内容。与此同时,掘金内还有沸点、掘金翻译计划、线下活动、专栏文章等内容。即使你是 GitHub、StackOverflow、开源中国的用户,我们相信你也可以在这里有所收获。">
<style>
</style>
<title>浮动解决父级高度塌陷</title>
<style>
.box1{
width: 100px;height: 100px;
background-color: purple;
/* 如果box1 浮动后，box2 会上升--我们需要在box2设置清楚浮动 */
float: left;
}
.box2{
/* box1 向左浮动，box2 清除左边的浮动，同时向右边浮动 */
clear: left;
float: right;
width: 200px;height: 200px;
background-color: red;
}
.box3{
/* box2 浮动了，所以box3 需要设置清楚浮动 */
clear: right;
width: 300px;height: 300px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1"> 1 </div>
<div class="box2"> 2 </div>
<div class="box3"> 3 </div>
</body>
</html>
2。额外标签方法 。clear 类似新闻模块，第一种直接父级高度设置高度 第二种：额外标签法 给父元素新增一个clear标签,空开的div 撑开div ,缺点结构复杂
<style>
.box1{
/* 父级没有高度 只设置一个边框 */
border: 1px solid black;
}
.box2{
/* box2 只要设置 浮动 box1 父级高度就会塌陷 */
float: left;
width: 200px;height: 200px;
background-color: red;
}
.clear{
/* 第二种：额外标签法 给父元素新增一个clear标签,空开的div 撑开div ,缺点结构复杂 */
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"> </div>
<div class="clear"> </div>
</div>
</body>
3.父元素新增calss 用calss 最后的伪类 以和就可以调取这个类 来解决父级高度塌陷问题
<title>浮动解决父级高度塌陷</title>
<style>
.box1{
/* 父级没有高度 只设置一个边框 */
border: 1px solid black;
}
.box2{
/* box2 只要设置 浮动 box1 父级高度就会塌陷 */
float: left;
width: 200px;height: 200px;
background-color: red;
}
.clearflx::after{
/* 父元素新增calss 用calss 最后的伪类 以和就可以调取这个类 来解决父级高度塌陷问题 */
/* 首先用新增加内 */
content: '';
/* 再把伪元素 转换元素类型 */
display: block;
/* 再清除 */
clear: both;
/* 设置内部不可见 */
height: 0px;
visibility: hidden;
}
</style>
</head>
<body>
<div class="box1 clearflx">
<div class="box2"> </div>
</div>
</body>
4.高度塌陷双伪元素清除 还可以解决边框重叠 clearfix
<title>浮动解决父级高度塌陷</title>
<style>
.box1{
/* 父级没有高度 只设置一个边框 */
border: 1px solid black;
background-color: purple;
}
.box2{
/* box2 只要设置 浮动 box1 父级高度就会塌陷 */
float: left;
width: 200px;height: 200px;
background-color: red;
}
/* 这个是hi测试的盒子 */
.test{
width: 400px;height: 200px;
background-color: aqua;
}
.clearflx::after,circle::before{
/* 父元素新增calss 用calss 最后的伪类 以和就可以调取这个类 来解决父级高度塌陷问题 */
/* 首先用新增加内 */
content: '';
/* 再把伪元素 转换元素类型 */
display: table;
/* 再清除 */
}
.clearflx::after{
clear: both;
}
</style>
</head>
<body>
<div class="box1 clearflx">
<div class="box2"> </div>
</div>
<!-- 第二个盒子 测试边框是否会重叠 -->
<div class="test">我是测试模块</div>
</body>
</html>
5.直接给父级一个overflow
<title>浮动解决父级高度塌陷</title>
<style>
.box1{
/* 父级没有高度 只设置一个边框 */
border: 1px solid black;
background-color: purple;
/* 直接给父级设置over */
overflow: hidden;
}
.box2{
float: left;
width: 200px;height: 200px;
background-color: red;
}
/* 这个是hi测试的盒子 */
.test{
width: 400px;height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="box1 clearflx">
<div class="box2"> 子元素 </div>
</div>
<!-- 第二个盒子 测试边框是否会重叠 -->
<div class="test">我是测试模块</div>
</body>
6.关于BFC布局方法 Bfc它决定了元素如何对其内容进行定位，以及和其它元素的关系和相互作用，当涉及到可视化布局的时候，DFC就提供了一个环境，BFC是一个完全独立的空间，让空间里面的子元素不会影响到外面的布局 6.1 如何触发BFC
- overflow: hidden
- display: inline-block
- position: absolute
- position: fixed
- display: table-cell
- display: flex 6.2 BFC就是一个块级元素，块级元素会垂直方向一个接一个的排列 BFC页面就是一个独立的容器，容器里面的标签不会影响到外部标签 垂直方向的距离由margin决定，属于一个BFC的两个相邻的标签外边距会发生重叠 计算BFC的高度的时候，浮动元素也会参与计算。 6.3 浮动解决父级高度塌陷,BFC案例
<title>浮动解决父级高度塌陷</title>
<style>
.bigbox{
background-color: pink;
/* 上面给的颜色是没有生效的 */
/* 这个时候我们使用bfc布局， 只需要转换父级元素类型 */
display: inline-block;
}
.box1 , .box2{
float: left;
width: 200px;height: 200px;
background-color: red;
margin: 100px;
}
</style>
</head>
<body>
<div class="bigbox">
<div class="box1"> 1</div>
<div class="box2">2 </div>
</div>
</body>
6.4 Margin边距重叠问题
在没有设置的情况下，上盒子下边和下盒子上边，外边距2个10px,会合并为1个10px,产生了外边距合并的情况：
为了解决此问题可以使用BFC规则（为元素包裹一个盒子形成一个完全独立的空间，做到里面元素不受外面布局影响），或者简单粗暴方法一个设置margin，一个设置padding。
<title>浮动解决父级高度塌陷</title>
<style>
.box{
width: 200px;height: 200px;
background-color: red;
margin: 10px;
/* 设置Bfc环境 */
display: inline-block;
}
</style>
</head>
<body>
<div class="bigbox">
<div class="box"> 1</div>
<div class="box">2 </div>
</div>
</body>
6.5 二个栏布局的时候，第一个元素设置float后，脱离文档流，第二个会覆盖上去，我， 需要给第二个div 设置一个bfc环境
<title>二栏布局</title>
<style>
.left{
width: 100px;height: 100px;
background-color: red;
float: left;
}
.test{
width: 100px;height: 100px;
background-color: blue;
display: inline-block;
}
/* 以上 */
</style>
</head>
<body>
<div class="left"> 我是左边的额，我的内我自己会内部，我会向左边浮动的啊。</div>
<div class="test">我是右边的 我自己是不会浮动的啊 </div>
</body>
7.清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
浮动的元素是脱离文档标准流的，如果我们不清楚浮动，那么就会造成父元素高度塌陷，影响页面布局。
清除浮动的方式：
7.1为父元素设置高度
7.2
- 为父元素添加
overflow:hidden - 伪元素
.fix::after {
content:"";
display:block;
clear:both;
}
使用伪元素的好处：不增加冗余的DOM节点，符合语义化
overflow:hidden可以触发BFC机制。BFC：块级格式化上下文，创建了 BFC的元素就是一个独立的盒子，它规定了内部如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素，计算BFC的高度时，浮动元素也参与计算
