BFC和margin塌陷问题

margin塌陷问题

(margin塌陷)父子元素之间垂直方向的margin会粘合到一起，取最大的那个值；

解决方法	优缺点
给父级加一个 border-top: 1px solid red	不专业，尽量不用
bfc(block format context)块级格式化上下文

• css是把html里面的每一个元素都当成一个盒子，而且它进一步的认为每一个盒子里面都有一套渲染规则，这个渲染规则是，你写完这个代码它能按照你写的代码把页面绘制出来。

• 每一套盒子里面都有一个一模一样的语法规则，bfc是可以通过手段让其中的几个盒子或一个盒子它里面的渲染规则改变。

---

通过bfc解决margin塌陷问题

如何触发一个盒子的bfc	语法
给父级设置绝对定位	position: absolute
给父级设置行级块元素	display: inlinebolck
给父级设置设置浮动	float: left/right
给父级添加溢出隐藏	overflow: hidden

通过bfc解决margin塌陷问题时会出现新的问题，解决方法并不完美，只能针对需求选择方法

---

两个兄弟元素之间垂直方向的margin是合并的

解决方法	优缺点
给它们添加一个父级然后给父级使用bfc	更改了结构
不解决（通过数学的方法计算）

---

浮动模型

• 浮动元素产生了浮动流

• 所有产生了浮动流的元素，块级元素看不到他们，产生了bfc的元素和文本类属性的元素以及文本都能看到浮动元素

• 产生浮动流的元素撑不开父级

解决父级包住方法

<div class="wrapper">
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <p class="clear"></p>  // 在浮动元素的后面添加一个<p>标签
</div>
.content{
    float: left;
    width: 100px;
    height: 100px;
    background-color: black;
}
.clear{
    clear: both;  // 再给p设置清除周围的浮动流
}

 

clear: both;是清除浮动流 这种方法虽然可以解决问题但是它破坏了结构 可以用伪元素来清除浮动，这样不破坏结构

通过伪元素清除浮动；最标准的写法

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

 

注意：clear只有在块级元素上才能用，伪元素是行级元素要设置display: block

还可以通过给父级元素设置bfc；但是这样父级元素的宽就变成仅仅只能包住内容 position: absolute; float: left/right 会在内部把元素转换成 inlint-block;

###给图片设置 float: left; 就可以实现文字环绕图片的效果