css--浮动布局

浮动布局

使用float：left；给浮动定义。

float属性定义元素在哪个方向浮动。在css中任何元素都可以浮动，不论元素本身是何种元素，在浮动时都会生成一个块级框。

选项	说明
left	向左浮动
right	向右浮动
none	不浮动

文档流

没有设置浮动的块级元素是独占一行的。丢失空间：如果两个元素，只给第一个元素设置浮动，第二个元素不进行设置，则第一个元素空间位置会丢失，第二个元素会重叠到第一个元素上，有点类似position：absolute；
但如果第二个元素设置浮动，第一个不设置，只有两个元素的情况下，看不出来有啥区别。
两个元素都设置浮动后，会并排显示。浮动边界：浮动元素边界不超过父元素的padding。浮动转块：任何元素设置浮动之后会转化为块状元素，可以设置宽、高‘

---

清除浮动

CLEAR

选项	说明
left	左边远离浮动元素
right	右边远离浮动元素
both	左右都远离浮动元素

常见使用方法
1.在父元素内部后面添加一个没有高度的子元素，并且使用clear：both；
2.使用::after伪类为父元素添加后标签

div::after{
    content:"";
    display:block;
    clear:both;
}

3.overflow
子元素使用浮动之后，并不能将父元素顶开，此时父元素高度为0，给父元素设置overflow：hidden；属性可以清楚浮动。

---

形状浮动

通过形状浮动，可以让内容围绕图片。

距离控制 shape-outside：

选项	说明
margin-box	外边距环绕
padding-box	内边距环绕
border-box	边线环绕
content-box	内容环绕

显示区域 clip-path

选项	说明
circle	圆形
ellipse	椭圆
polygon	多边形

利用css画图像

圆形：clip-path: circle(50% at center);  /*center是锚点*/
三角形：clip-path: polygon(0 100%, 50% 0, 100% 100%);
梯形： clip-path: polygon(100% 0,75% 100%, 25% 100%, 0 0);
椭圆： clip-path: ellipse(30% 20% at 50% 50%);

内移距离

使用inset属性控制环绕向内移动的距离
shape-outside:inset(50px 30px 80px 50px) padding-box;

环绕模式

选项	说明
circle	圆形环绕
ellipse	椭圆环绕
url	图片环绕
polygan	多边环绕