【学习笔记16】三种布局方式

默认文档流就是对页面布局不加任何修饰，元素自动的布局方式，其特点如下
1)元素在页面中的显示顺序与元素在代码中出现的顺序是一致的，即文档结构从外到内、从上到下、从左至右。
2)块级元素独占一行空间，宽度默认为父级的100%，高度由其内容高度（子元素高度）所决定。
3)行内元素与其他元素共享一行空间，宽高由其内容所决定。

        同级别的块级元素：垂直方向的线性结构；

        同级别的行内元素：水平方向的线性结构。

布局方式：浮动布局、定位布局、伸缩盒布局/弹性盒

1.浮动布局（float）

浮动布局的主要是为了让块级元素在一行中显示（列级布局），或者让文字在
图片的周围显示。其取值有：

left:向左浮动元素
right:向右浮动元素
none:【默认值】，不浮动
inherit:浮动方式继承父元素

若给父元素一个高度，则不会失去高度，不用清除浮动；

若父元素本身没有高度，子元素浮动之后会脱离文档流，不能支撑起父元素，所以父元素就会失去高度，此时若需要清除浮动，则在父元素中给一个 overflow:hidden的命令，或者在最后一个浮动子元素后面加上一个<div class="clearboth">，在css中给这个块元素一个 clear:both的命令。

2.定位布局(position)

静态定位：默认定位方式，即处于默认文档流中࿰