常见的布局方案有哪些？
- 流动布局：遵循标准文档流。。
- 浮动布局
- float:left/right
- 层布局（定位）
- flex布局
浮动布局是怎样的？
- 由于默认的流式布局有不足。浮动初衷是为了实现字围（新闻）同时可以让块级元素可以并排显示。
格式：
float: left / right / none分别是左、右、不浮动，默认是不浮动。
- 1，在一个父元素内部，如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就会向上排列。下面两个图为黄色div块浮动前后。
- 浮动并没有完全地脱离了标准文档流（破坏性--->flex），如果后面的元素内部有文字，这些文字会环绕在浮动元素的周围，产生字围。
- 如果多个元素浮动了，那么这们就会并排显示，如果都是同一个方向的浮动，它们会紧紧地贴在一起。
- 如果一个元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直接移动到父元素的右边界。
- 如果一个元素没有设置高度，它的高度是靠里面的内容撑起来的。如果父元素内部元素都浮动了，那么会造成父元素的高度塌陷。如果父元素也浮动了，那么就不会出现高度塌陷了
- 父元素高度塌陷的解决办法有两种:1，显示加高度（加高法）2，
overflow:hidden
代码如下。
.father{
width: 150px;
/* height:150px; */
background-color:red;
border: 1px solid red;
overflow:hidden;
}
- 如果元素浮动了，它也会造成对后面的兄弟元素造成影响。解决办法是加：clear:both/left/righ语句。
- 当一个浮动起来的男盒子，没有设置宽高，那么这个盒子的宽高会尽可能的小，小到包裹住它里面的内容。
- 如果一个女盒子浮动了，那么就可以设置宽高了，相当于把它变成男标签。作用等同于
display:boock
- 如果同时有左浮动和右浮动，需要把右浮动的元素写在左浮动的前面
- 即使一个元素浮动了，那么它也是受父元素的控制。当父元素宽度变小时，装不下所有的子元素时，后面的子元素会表现出贴靠性。当父元素小到极限时，里面的浮动的子元素宽度是不会改变的。
