记录一个”兄弟激活bfc“的特殊性质
Posted hans774882968
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了记录一个”兄弟激活bfc“的特殊性质相关的知识，希望对你有一定的参考价值。
这篇blog只是记录一个兄弟激活bfc的特殊性质，先不分析原理。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>兄弟激活bfc的特殊性质</title>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">-->
<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!--<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>-->
<!--<script src="https://cdn.staticfile.org/vue/2.5.2/vue.min.js"></script>-->
<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<style>
.fa{
width: 700px;
background-color: #ccc;
display: flow-root;
}
.left{
width: 100px;
margin: 0 30px;
background-color: pink;
height: 120px;
float: left;
}
.mid{
margin: 0 114px;
border: 5px solid red;
display: flow-root;
background-color: deepskyblue;
height: 150px;
}
.right{
width: 200px;
float: right;
margin-left: 30px;
height: 160px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="fa">
<div class="left"></div>
<div class="left"></div>
<div class="right"></div>
<div class="mid"></div>
</div>
<!--<script src="./index.js"></script>-->
</body>
</html>
两个浮动元素水平方向的margin没有发生重叠。
我们发现兄弟激活bfc的特殊性质：
以左侧浮动元素为例。如果.mid设置的margin-left小于等于左侧浮动元素占据空间总和，则.mid的content的左边界恰好挨着左侧最靠右浮动元素的margin-right，即.mid的content恰好与浮动元素所占据的空间（包括margin）没有任何重叠。此时增大.mid的margin-left无效。否则，.mid的content的左边界开始往右收缩。
比如，这里.mid设置margin-left为320px不收缩，大于320px左边界开始收缩。这个效果类似于受到了max-width的限制。
这个例子里，.mid能占据的空间是固定的，所以展示出了一个类似IE盒模型的效果（原理实际上和IE盒模型无关）。
以上是关于记录一个”兄弟激活bfc“的特殊性质的主要内容，如果未能解决你的问题，请参考以下文章