BUG合集——HTML、CSS

一、margin顶部塌陷问题
解决方法一：给父元素加一个顶边框，但不建议使用;
解决方法二：块级格式化上下文（BFC）,父元素触发BFC，改变DIV内部的渲染规则;
1、position:abosolute;
2、display:inline-block;
3、float:left/right;
4、overflow:hidden;

<div id="marginTop" style="	width: 300px; height: 200px; background:black; margin-top:20px; margin-left:300px;">
	<div class="marginTopChildren" style="width: 200px; height: 100px; background:gray; margin-left:50px; margin-top:50px;">
	</div>
</div>

二、兄弟元素margin垂直距离重叠问题
解决方法一：将这两个兄弟元素放入不同的父元素中，不建议使用；
解决方法二：只使用一个外边距即可；

<div id="marginVertical">
	<div class="boxOne" style="background-color: pink;margin-bottom: 50px;height:100px;"></div>
	<div class="boxTwo" style="background-color: skyblue; margin-top: 100px;height:100px;"></div>
</div>

三、浮动流无法被块级元素发现的问题
解决方法一：在浮动元素下方添加一个块元素并添加清除浮动的样式，由于添加了多余的结构，不建议使用；
解决方法二：给父元素的伪元素添加清除浮动的样式，伪元素为行元素需要转换成块元素才能使用clear；
#floatBox::after {content: “”;display: block;clear: both;}

HTML结构

<div id="floatBox" style=" border:6px solid #333;">
			<div class="boxOne"></div>
			<div class="boxTwo"></div>
</div>

CSS样式

.boxOne {
	float: left;
	background-color: pink;
	height: 100px;
	width: 200px;
}

.boxTwo {
	float: left;
	background-color: skyblue;
	height: 100px;
	width: 200px;
}

#floatBox::after {
	content: "";
	display: block;
	clear: both;
}