CSS3浮动
作者:互联网
浮动
- 可以使用
float
进行定义
选项 | 说明 |
---|---|
left | 向左浮动 |
right | 向右浮动 |
none | 不浮动 |
清除浮动
- CSS提供了
clear
规则用于清除元素浮动影响。
选项 | 说明 |
---|---|
left | 左边远离浮动元素 |
right | 右连远离浮动元素 |
both | 左右都远离浮动元素 |
- 使用
::after
伪类为父元素添加后标签,实现清除浮动影响。
.clearfix::after {
content: "";
display: block;
clear: both;
}
- 通过添加父元素并设置
overflow
属性可以清除浮动,使用父元素产生BFC
机制,即父元素的高度计算会包括浮动元素的高度。
<style>
article {
overflow: hidden;
}
...
- 在父元素内部最后面添加一个没有高度的了元素,并使用
clearfix
类标签
.clearfix {
clear: both;
height: 0;
}
形状浮动
-
通过
shape-outside
可以让内容围绕图片,类似于我们在word 中的环绕排版。要求图片是有透明度的PNG格式。距离控制
选项 | 说明 |
---|---|
margin-box | 外边距环绕 |
padding-box | 内边距环绕 |
border-box | 边线环绕 |
content-box | 内容环绕 |
环绕模式
选项 | 说明 |
---|---|
circle | 圆形环绕 |
ellipse | 椭圆环绕 |
url | 图片环绕 |
polygan | 多边环绕 |
img {
float: left;
shape-outside: url(xj.png);
}
标签:CSS3,浮动,both,clearfix,元素,box,环绕 来源: https://www.cnblogs.com/1kxj/p/15851768.html