浮动布局

浮动

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

float

使用浮动可以控制相邻元素间的排列关系。

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

文档流

没有设置浮动的块元素是独占一行的。 浮动是对后面元素的影响。

丢失空间

如果只给第一个元素设置浮动，第二个元素不设置，后面的元素会占用第一个元素空间。

使用浮动

两个元素都设置浮动后，会并排显示

浮动边界

浮动元素边界不能超过父元素的padding

浮动转块

元素浮动后会变为块元素包括行元素如 span，所以浮动后的元素可以设置宽高。

清楚浮动

不希望元素受浮动元素影响时，可以清除浮动。

clear

CSS提供了 clear 规则用于清除元素浮动影响。

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

clear: both;

after

使用 ::after 伪类为父元素添加后标签，实现清除浮动影响。

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

overflow

子元素使用浮动后将不占用空间，这时父元素高度为将为零。通过添加父元素并设置 overflow 属性可以清除浮动。

将会使用父元素产生 BFC 机制，即父元素的高度计算会包括浮动元素的高度。

overflow: hidden;

形状浮动

通过形状浮动可以让内容围绕图片，类似于我们在word 中的环绕排版。要求图片是有透明度的PNG格式。

距离控制

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

shape-outside: margin-box;

显示区域

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

clip-path: circle(50% at center);

clip-path: ellipse(50% 80% at 100% 0);

clip-path: polygon(50% 0, 100% 100%, 0 100%)

内移距离

使用 inset 属性控制环绕向内移动的距离。

shape-outside: inset(50px 30px 80px 50px) padding-box;

环绕模式

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

shape-outside: circle(50%) padding-box;

shape-outside: ellipse(80px 70px) padding-box;

shape-outside: url('img.png');

shape-outside: polygon(50px 0px, 0 100px, 100px 100px);