css float理解

float 浮动理解

用法

浮动可以使男标签失去独占一行的特性，宽度允许的情况下，浮动的多个同级盒子可并排显示，超过父元素宽度自动换行。

两种常用属性

• float：left

  所有浮动盒子向左对齐

• float：right

  所有浮动盒子向右对齐

注意事项

同级带有浮动属性的盒子，html中写在前面的先进行浮动并占据位置，向左浮动则写在前面的盒子在最左面，向右浮动则写在前面的盒子在最右面。

<div class="fu">
    <div class="one" style="float: right;">1号</div>
    <div class="two" style="float: right;">2号</div>
    <div class="three" style="float: right;">3号</div>
</div>

上述代码的向右浮动结果：经过浮动，原先的1号2号3号会变成3号2号1号的排列方式

浮动属性会使盒子半脱离标准文档流

半脱离标准文档流：除去浮动盒子中的文字，盒子在标准文档流中不再占据空间（相对于父级盒子与没有浮动属性的同级盒子，如同不存在）。

同级带有浮动盒子之间的关系

• 同级浮动盒子同时半脱离了标准文档流，互相能感知对方的存在，除了不在独占一行可并排显示外，其余一切属性同原先相同。不会互相重叠，紧靠着排列，高度、宽度、外边距均可以相互影响感知。

浮动盒子对父级盒子的影响

• 当盒子不设置高度宽度时，默认宽度为100%，高度为其中内容的高度，又因为浮动盒子半脱离标准文档流，父级盒子感知不到其存在，当一个没有设置高度盒子内子盒子全部浮动时，父级盒子高度会塌陷到0。塌陷后的盒子会影响其他同级盒子的位置，造成不必要的麻烦。

应对浮动盒子对父级盒子造成塌陷的解决方案

• overflow: hidden; 原意为溢出部分隐藏 在父级盒子中添加可以使父级盒子高度可以随浮动盒子的高度变化
• 手动添加固定高度。高度固定，不会造成任何塌陷。

改变浮动盒子与父级元素相对位置的方法

浮动的子级盒子可以感知父级盒子，沿父级盒子上方及浮动方向开始排列，且可以跟随父级盒子的内填充改变位置,也可利用自身的外填充改变位置。

上下外边距一般用于调整同级盒子之间的位置关系，建议调整与父级盒子的上下位置时，利用父级盒子的内边框来调整

浮动盒子对同级未浮动盒子的影响

• 这种情况十分复杂，有多种情况，在这里我换了一种理解方式，假设浮动的盒子是一个只能够看到自己前方的透明人，未浮动的盒子是正常的人（看不到也碰不到透明人），这些盒子都来到同一个父级盒子内排队，html中的前后顺序，即他们的先来后到顺序.h会出现以下几种情况。

浮动盒子在未浮动盒子之前----当透明人在前面时，后来一个正常人，看不到透明人在前面，便会踏到透明人所在位置，出现盒子之间重叠的现象。因为看不到透明人，正常人的外边框属性只会对父级盒子，及其他正常人起作用。而透明人的外边框也只能对父级盒子及其他透明盒子起作用。

浮动盒子在未浮动盒子之后----当正常人在前面时，后来的透明人看得见正常人，便不会继续向前走，这种情况便不会出现盒子重叠现象。同时透明人可看见正常人的外边距，二者之间的外边距均可起作用。

为了避免重叠这种尴尬，给未浮动的盒子加上 clear: both; 属性清除浮动影响。

加上 clear: both;后的正常人可以触碰到透明人的外边距铠甲，但依旧看不到透明人，便又有以下两种情况

• 浮动盒子在未浮动盒子之前----正常人看不到透明人，继续向前走，直到自身碰到了透明人的外边距,但为时已晚，虽然没有产生重叠，但是最后正常人的外边距没了作用，透明人的外边距可以起作用。

• 浮动盒子在未浮动盒子之后----同未加clear: both;情况相同。当正常人在前面时，后来的透明人看得见正常人，便不会继续向前走，这种情况便不会出现盒子重叠现象。同时透明人可看见正常人的外边距，二者之间的外边距均可起作用。

改变浮动盒子与同级未浮动元素相对位置的方法

在外边距起作用的情况下利用外边距

如何更好避免利用浮动后带来的影响

1.由于浮动盒子与同级未浮动盒子之间的关系过于复杂，难以理解，也不方便使用，因此使用浮动布局时，尽量避免带有浮动的盒子与未浮动的盒子放在同一个父级元素之中。即几个盒子之间需要利用浮动布局时，提前在上面框上一个父级盒子，并及时给该父级盒子加上一个 overflow: hidden; 属性。避免了塌陷，也避免了对同级未浮动盒子的影响。

2.不使用float，利用flex布局。（解决不了问题，就解决掉带来问题的人）