元素的浮动总结

常见的布局方案有哪些？

• 流动布局：遵循标准文档流。。
• 浮动布局
• 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
• 若是同时有左浮动和右浮动，须要把右浮动的元素写在左浮动的前面
• 即便一个元素浮动了，那么它也是受父元素的控制。当父元素宽度变小时，装不下全部的子元素时，后面的子元素会表现出贴靠性。当父元素小到极限时，里面的浮动的子元素宽度是不会改变的。