浮动布局

浮动——float属性
属性功能

设置一个元素发生浮动，浮动后的元素默认大小为内容大小，并且可以设置宽高，也可以与其他浮动元素或行元素处于同一行。

块元素能够设置宽高，但是默认独占一行；行元素默认是内容撑开宽高的，虽然某个行元素能够和其他行元素处于同一行，但是并不能设置宽高。因此，如果希望既能够设置宽高又能够与其他元素处于同一行，就需要使用到浮动。

原理

1. 浮动的三大属性，如下：

a) left （从左向右浮动）

b) right （从右向左浮动）

c) none （没有）

四、浮动之后有很多特性

1.块级元素可以横排显示

2.行内元素可以设置宽度和高度

3.元素没有设置宽度和高度时，宽度为内容撑开宽

4.支持margin

5.脱离文档流

6.提升半层级

问题：不支持margin:auto;

在默认情况下，一个元素的内容大小决定这一元素的高度，当为一个元素设定了高度，那么在主流浏览器中，这个元素的高度不再由内容大小而设置的这个高度来决定。浏览器默认内容超过平父级的时候依旧显示，因此当我们为父元素设置高度后，父元素按照设置的值进行渲染，内容超出父元素的部分在默认情况下并不会隐藏。

子级浮动后，就会脱离父级的文档流，父级元素就相当于“少”了内容，或者说是浮动的这个元素不再对父级的高度产生任何作用或影响。

由于浮动技术有很多的缺点，所以将会受到很大的冲击，它的对手将是弹性布局。弹性布局主要作用是，设置父元素内的多个块元素的排列顺序以及分布方式。

弹性布局与浮动相比，不但可以实现多个块元素共存于一行，而且对父元素没有不好的影响，同时实现子元素等距分隔，或等距环绕并不需要人为的计算。弹性布局会自动计算。