浮动

浮动的作用：默认的流式布局有不足之处，浮动的目的就是为了男标签（块级元素）可以并排显示。

格式：  float：left/right/none    none默认的不浮动。

特点：

• 浮动初衷是为了实现字围（新闻），后面才发现，浮动可以让多个男标签并排显示。 
•  在一个父元素内部，如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就让向上排 
•  浮动并没有完全地脱离了标准文档流（破坏性--->flex），如果后面的元素内部有文字，这些文字会环绕在浮动元素的周围，产生字围。 
•  如果多个元素浮动了，那么这们就会并排显示，如果都是同一个方向的浮动，它们会紧紧地贴在一起。
•  如果一个元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直接移动到父元素的右边界。
•  如果一个元素没有设置高度，它的高度是靠里面的内容撑起来的。如果父元素内部元素都浮动了，那么会造成父元素的高度塌陷。 
•  如果元素浮动了，那么它会造成影响：造成父元素高度塌陷。解决:显示加高度（加高法） 小偏方（overflow:hidden）
•  如果元素浮动了，它也会造成对后面的兄弟元素影响。解决：clear:both/left/right  
•  当一个浮动起来的男盒子，没有设置width，那么这个盒子的宽高会尽可能小，小到包裹住它里面的内容，这叫包裹性， 
•  如果一个元素浮动了，它会悄悄地做一个变性手术。如果一个女盒子浮动了，那么就可以设置宽高了，相当于把它变成男标签。 
•  如果父元素也浮动了，那么就不会出现高度塌陷了。 
•  浮动元素会从标准文档流中半脱离出来。证明：字围 
• 一个元素浮动了，那么它也是受父元素的控制。当父元素宽度变小时，装不下所有的子元素时，后面的子元素有贴靠性。当父元素小到极限时，里面的浮动的子元素宽度是不会改变的。

浮动的三大特征：

1.包裹性

如果一个块级元素，在没有设置width的情况下（前提条件），一旦使用了float，那么他的width就会发生变化，尽量最小，能够完全包裹其中内容即可。

如果对一个块级元素设置了width ，就不会具备包裹性。

2.破坏性

在一个块级容器中（如div），如果它的子元素，都有浮动（比如float），并且没有清除这个浮动，那么块级容器将会塌陷。这就是浮动的破坏性。

如何解决由于破坏性导致的塌陷问题呢

1.在块级容器中，使用overflow:hidden就可以

2.在块级容器结束之前，添加一个空的div标签，然后设置clear：both的属性，就可以。

3.块级性

如果一个行内元素，设置了浮动（left或right）之后，它就会变成块级框，就可以设置其盒模型的所有属性，如width和height。

最经典的就是给a标签加浮动。

浮动的具体表现：

display：

作用：用来设置元素的显示形态

格式：display：属性值

其中，属性值有如下几个：

• block，块
• inline，行内
• none，隐藏
• inline-block，行内块

display就像是做变性手术。

none，表示不显示当前的元素，当设置为none，完全不占据页面的任何空间。

inline-block

将元素设置为行内块元素