标签:CSS3 浮动 both clearfix 元素 box 环绕
浮动
- 可以使用
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
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。