文档流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档流</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: orange;
/*默认BFC水平布局方向:从左至右*/
/*margin-left: 50px;*/
/*更改BFC水平布局方向:从右至左*/
float: right;
margin-right: -50px;
}
.b1 {
width: 200px;
height: 200px;
background: red;
margin-left: 10px;
}
.bb1, .bb2 {
width: 50px;
height: 50px;
background: cyan;
float: left;
}
.bb1 {
margin-left: 20px;
margin-right: 20px;
}
.bb2 {
margin-left: 20px;
}
</style>
</head>
<body>
document flow => normal flow
本质:普通流/常规流
流:水流 河流 泥石流 => 自上而下(连续的),连续的
文档:页面主体
文档流:一个连续具有逻辑上下的页面整体
理解:出现在页面中的显示内容,均可以理解为在文档流中(片面的)
概念:将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。
BFC:Block formatting context
概念:由block-level box参与布局,同一区域(容器空间)中,相互影响,且不会对区域外产生影响
<!-- b1与b2 同在一个区域 | bb1与bb2 同在一个区域 -->
<div class="b1">
<div class="bb1"></div>
<div class="bb2"></div>
</div>
<div class="b2">
</div>
<div class="box"></div>
</body>
</html>
