CSS浮动

目录

一、浮动简介

二、浮动的特点

特点一:

特点二：

总结：

---

一、浮动简介

布局方式：文档流中元素默认的布局方式，margin，浮动，定位，弹性盒子，网格布局·····
浮动：设置元素浮动，可以让元素脱离文档流，从而不具有元素在文档流中特点，
即块元素不会独占一行，行内元素也可以设置宽高等等
设置元素浮动：float
可选值：none   默认值
              left   向左浮动
              right   向右浮动
设置元素浮动后的特点：
1、元素脱离文档流，元素一旦脱离文档流，就不会占据原来在文档流中的位置，其下面的元素会立即跑上去
2、元素浮动之后，不会超过它前一个兄弟，最多一边齐
3、如果前一个兄弟没有浮动，下面浮动的元素，也不会跑到前面
4、设置元素浮动后，元素也是尽量的向左或者向右进行浮动
5、浮动元素不会超过其父元素的范围

二、浮动的特点

特点一:

浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，
所以我们可以通过浮动来设置文字环绕图片的效果

特点二：

当元素设置浮动以后，会完全脱离文档流，元素的一些特点也会发生改变
脱离文档流的特点：
块元素：
1:块元素不再独占页面的一行
2:块元素的宽高被内容撑开
行内元素：
浮动过后的行内元素,可以设置行高

总结：

当元素设置浮动以后,脱离文档流，就不需要再区分块和行内，行内块元素