HTML元素浮动

目录

一、为什么设置元素浮动？

二、如何设置浮动？

三、元素浮动的特点

（一）第一类特点

（二）第二类特点

（三）第三类特点

---

一、为什么设置元素浮动？

设置元素浮动，可以让元素脱离文档流，从而不具有元素在文档流中的特点，即元素不会独占一行，行内元素也可以设置宽高，这样可以让页面的布局更加方便。

二、如何设置浮动？

设置元素浮动属性float，其可选值有：（1）none  默认值，不浮动

（2）left  向左浮动    （3）向右浮动

三、元素浮动的特点

（一）第一类特点

1.设置元素浮动后，元素会脱离文档流，元素一旦脱离文档流，就不会占据原来在文档流的位置，其下面的元素会立即跑上来

2.元素浮动之后，不会超过前一个兄弟，最多一边期

3.如果前一个兄弟没有浮动，下面浮动的元素也不会跑到前面

4.设置元素浮动后，元素也是尽量的向左或向右进行移动

5.浮动元素不会超过其父元素的范围

（二）第二类特点

当浮动的元素碰到文字，浮动的元素不会盖住文字，而文字会环绕浮动的元素，产生文字环绕元素的效果

（三）第三类特点

当元素设置浮动后会脱离文档流，元素的一些特点也会发生改变，脱离文档流的特点

块元素：1.块元素不再独占页面的一行

               2.块元素的宽度被内容撑开

行内元素：1.浮动过后的行内元素，可以设置行高