CSS基础四：margin塌陷、margin合并、浮动元素

经典bug：margin塌陷

问题：垂直方向的margin父子元素是结合在一起的，取最大值

<div class="wrapper">
    <div class="content"></div>
</div>

*{
	margin: 0;
	padding: 0;
}
.wrapper{
	margin-left: 100px;
	margin-top: 100px;
	width: 100px;
	height: 100px;
	background-color: black;
}
.content{
	margin-left: 50px;
	margin-top: 150px;
	width: 50px;
	height: 50px;
	background-color: green;
}

渲染结果：

解决方案一

给父元素添加一个border，不推荐

border-top: 1px solid red;

解决方案二

bfc：block format context
触发BFC：
display：inline-block
overflow：hidden（溢出隐藏）
float：left/right， position：absolute， 打内部把元素转换成inline-block

经典bug

问题：兄弟结构垂直方向的margin会合并

<span class="box1">123</span>
<span class="box2">234</span>
<div class="demo1">1</div>
<div class="demo2">2</div>

.box1{
	background-color: red;
	margin-right: 100px;
}
.box2{
	background-color: green;
	margin-left: 100px;
}
.demo1{
	background-color: red;
	margin-bottom: 100px;
}
.demo2{
	background-color: green;
	margin-top: 100px;
}

解决方案：不推荐，实际不解决

bfc
首先为两个div添加一个父元素，对父元素添加bfc

<div class="demo1">1</div>
<div class="wrapper">
    <div class="demo2">2</div>
</div>

.wrapper{
	overflow: hidden;
}

浮动模型

1. 浮动元素产生了浮动流
   所有产生了浮动流的元素，块级元素看不到它们
   产生了bfc的元素和文本类属性的元素（inline）以及文本都能看到浮动元素
2. 父级块级元素无法包住浮动元素的子级问题

<div class="wrapper">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
</div>

.wrapper{
	border: 1px solid black;
}

.content{
	float: left;
	color: #fff;
	background-color: black;
	width: 100px;
	height: 100px;
}

解决方案：取消子元素的浮动流，不推荐

<!-- 在wrapper中添加一个元素 -->
<p></p>

/*在css中定义p取消浮动流*/
p{
	border: 0px solid green;
	clear: both;
}

3. 实现报纸布局，文字环绕图片的效果

伪元素

1. 存在在标签中，可以在CSS选中伪元素，并添加样式
2. 行级元素：inline，可以当作正常元素用，有两个，分别是before和after，默认无内容
   clear清除浮动必须是块级元素

解决上述问题：用伪元素清除浮动，并且修改伪元素为块级元素

.wrapper::after{
	content: "";
	clear: both;
	display: block;
}

知识和示例来源：渡一