HTML定位和布局----float浮动
1、定位体系⼀共有三种
html里的float是什么意思（1）常规流；
（2）浮动定位
（3）绝对定位
2、float属性常⽤的语法：
（1）float：left；左浮动
（2）float：right；右浮动
（3）float：none；⽆浮动
任何元素都可以使⽤浮动，⽆论是块级元素div、ul等等，还是⾏内元素都可以浮动，任何被声明float的元素都会⾃动被设置成块元素，有了块级元素的各种特点，可以设置宽⾼，可以设置内外边距。
但是很重要的⼀个点就是：float浮动⽤于布局，可以很轻松的达到靠左靠右的效果，但是，当使⽤完float浮动之后，⼀定要记住清除浮动，要不然很可能会造成⾼度坍塌。
3、float的影响
（1）对于⾏内元素来说，使⽤float之后，可以设置宽度⾼度了；
（2）对于块级元素来说，默认占满⾏的块级元素，⽐如p标签，会⾃动变成内容撑开宽度，但同样可以设置宽⾼。
4、浮动之后盒⼦的位置
（1）左浮动的盒⼦向上向左排列；
（2）右浮动的盒⼦向上向右排列；
（3）浮动盒⼦的顶边不得⾼于上⼀个盒⼦的顶边；
（4）若剩余空间⽆法放下浮动的盒⼦，则该盒⼦向下移动，直⾄具备⾜够的空间可以容纳盒⼦，然后再向左或向右移动。
5、当常规流盒⼦遇上浮动盒⼦
（1）浮动盒⼦在摆放时会避开常规流盒⼦；
（2）常规流盒⼦在摆放时会⽆视浮动盒⼦；
（3）常规流盒⼦在⾃动计算⾼度时，⽆视浮动盒⼦——⾼度坍塌。
6、清除浮动
为了避免造成⾼度坍塌，因此，我们经常会在完成浮动布局之后进⾏清除浮动。
清除浮动的⼏个语法：
（1）clear：none；不清除浮动；
（2）clear：left；清除左浮动，元素在左浮动盒⼦的下⽅摆放；
（3）clear：right；清除右浮动，元素在右浮动盒⼦的下⽅摆放；
（4）clear：both；清除左右浮动，元素在左右浮动盒⼦的下⽅摆放。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。