CSS float浮动布局
CSS float浮动布局
- 1. 清除浮动
- 2. 浮动边界
- 3. 浮动转换
- 4. 形状浮动 控制环绕模式
- 5. 改变元素的显示区域
属性值
选项 | 说明 |
---|---|
left | 向左浮动 |
right | 向右浮动 |
none | 不浮动 |
float
是最开始出现的一种布局方式,主要解决:文本在图像周围环绕,也即应用于图像。但是在css中,任何元素都可以浮动,浮动元素会生成一个块级框,而不论它本身是何种元素。
元素一般是处于普通流中,也即块级元素独占一行,从上往下依次显示布局。行级元素可以在一行显示多个,按照顺序进行显示布局。
而添加了float
布局的元素则会脱离原来所在的文档流。并‘漂浮’
在当前所在的文档流的位置(如果前一个元素没有添加float
布局的情况下),由于当前元素文档流实际上没有被元素占用,因此当前元素之后的元素会按照普通流布局的方式,占用当前元素的文档流。表现为:丢失空间
也即:
<div></div>
<div></div><style>
div {width: 200px;height: 200px;
}div:nth-of-type(1) {width: 300px;float: left;border: 1px solid red;
}div:nth-of-type(2) {height: 300px;background: linear-gradient(90deg,blue,darkblue);
}
</style>
此时由于第一个元素添加了float:left
,则脱离了原来的文档流,后面元素会向上移动,占用第一个元素的空间。
如果第二个元素也添加了float
,那么可以这样去思考,由于第一个元素的原因,第二个元素所处的文档流变成了第一个元素所处的文档流,此时再给第二个元素添加float
,那么也会像第一个元素一样,脱离当前的文档流,使得当前元素和第一个元素一样处于'漂浮'
状态,并紧跟着第一个元素显示一排。
同样,如果第二个元素后面还有其他元素,那么也会向上移动,改变原来所处的文档流位置。
注意:添加了float
的元素,只是在会脱离当前所在的文档流,但是仍然漂浮在当前文档流上一层
,而不是说直接脱离整个文档流,跑到所有文档流的最顶部。
从上面案例可以看出,添加了浮动的元素会影响其后元素的布局。此外由于元素脱离原来的文档流,且父盒子没有添加高度属性,那么父盒子无法感知到子盒子的存在,因此父盒子不会被撑开。
<div class="box"><div></div>
</div><style>
.box {border: 1px solid red;
}.box div {float: left;width: 200px;height: 200px;background: linear-gradient(90deg,wheat,yellow);
}
</style>
1. 清除浮动
知道了float
带来的不好的地方,则需要去清除浮动带来的影响。
方法一:采用css clear
属性
属性值 | 说明 |
---|---|
none | 元素不会向下移动清除之前的浮动 |
left | 元素被向下移动用于清除之前的左浮动 |
right | 元素被向下移动用于清除之前的右浮动 |
both | 元素被向下移动用于清除之前的左右浮动 |
将该属性添加在被浮动影响的后面元素,即可以清除浮动
<div></div>
<div></div><style>
div {width: 200px;height: 200px;
}div:nth-of-type(1) {float: left;background: linear-gradient(45deg,red,blue);
}div:nth-of-type(2) {clear: both;background: linear-gradient(45deg,wheat,greenyellow);
}
</style>
则受浮动影响的元素就可以正常显示了
因此在受浮动影响的父元素,就可以利用此方法,在浮动元素之后新增加一个元素,使新增加的元素清除浮动,这样新增加的元素的位置就在浮动元素的下面,使得在一定程度上实现了撑开盒子的作用。
添加新标签
<div class="box"><div></div>// 新增加的标签<p class="clearfix"></p> </div><style> .box {border: 1px solid red;}.box div {float: left;width: 200px;height: 200px;background: linear-gradient(90deg,wheat,yellow); }// 清除浮动 .clearfix {clear: both; } </style>
由于每次都需要新增加一个标签,因此不建议使用
使用伪类的方式添加元素
<div class="box"><div></div> </div><style> .box {border: 1px solid red;}.box div {float: left;width: 200px;height: 200px;background: linear-gradient(90deg,wheat,yellow); }// 在父盒子之后添加元素 .box::after {content: "";clear: both;display: block; // 必须表现为块级元素才行 } </style>
方法二:BFC
其次还可以采用BFC,使得父元素形成独立的空间,也即可以感知子元素的高度和宽度,在一定程度上也不会影响外面的元素的布局。
BFC
<div class="box"><div></div> </div><style> .box {border: 1px solid red;overflow: hidden; // 触发BFC}.box div {float: left;width: 200px;height: 200px;background: linear-gradient(90deg,wheat,yellow); }</style>
2. 浮动边界
浮动元素边界不能超过父元素的padding
<div class="box"><div></div>
</div><style>
.box {width: 300px;border: 1px solid red;padding: 30px;overflow: hidden;}.box div {float: left;width: 200px;height: 200px;background: linear-gradient(90deg,wheat,yellow);
}</style>
3. 浮动转换
元素浮动后会变为块元素包括行元素如 span
,所以浮动后的元素可以设置宽高。
4. 形状浮动 控制环绕模式
通过形状浮动可以让内容围绕图片,类似于我们在word 中的环绕排版。要求图片是有透明度的PNG格式。
shape-outside
定义了一个可以是非矩形的形状,相邻的内联内容应围绕该形状进行包装。默认情况下,内联内容包围其边框,shape-outside
提供了一种自定义此包装的方法,可以将文本包装在复杂对象周围而不是简单的框中。
理解:使用形状值来定义浮动区域的浮动,这将使得内联内容会环绕着形状,而不是产生浮动的边框。
关键字属性值
属性值 | 说明 |
---|---|
none | 该浮动区域不产生影响,行内元素以默认的方式包裹着该元素的margin box |
margin-box | 定义一个由外边距的外边缘封闭形成的形状。这个形状的角的半径由相应的border-radius和margin 的值决定。 |
border-box | 定义一个由边界的外边缘封闭形成的形状。 这个形状遵循正常的边界外部圆角的形成规则。 |
padding-box | 定义一个由内边距的外边缘封闭形成的形状。这个形状遵循正常的边界内部圆角的形成规则。 |
content-box | 定义一个由内容区域的外边缘封闭形成的形状。 |
函数值属性
属性值 | 说明 |
---|---|
circle([circle-radius] [at position]) | 定义一个由圆形指定的包装形状(不改变原来的元素形状,只改变相邻内联元素的环绕方式),circle radius是形状的半径,at position是圆心的位置(不写默认在中心),属性值可以是px或者百分比 |
ellipse( [<shape-radius>{2}]? [at <position>]? ) | 定义一个由椭圆指定的包装形状,shape-radius指定椭圆的长半轴,at position指定圆心的位置,如果是一个值则表示圆心取相同的值,两个值表示分别在x y上取值 |
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# ) | 定义一个由多边形指定的包装形状,参数由多组(x,y)组成,指定多边形的各个角的坐标。从而形成不规则环绕形状。 |
inset( <shape-arg>{1,4} [round <border-radius>]? ) | 控制环绕向内移动的距离。也即浮动文字按照:上 右 下 左 在浮动元素上的偏移量得出的矩形边缘进行围绕。比如:pt:表示包装形状的上边距位于元素上外边缘的偏移位置。也即实现了环绕向内移动的效果。 |
url值
shape-outside: url(imageUrl);
文字通过给定的图片,并且通过计算图片的透明度后获取的形状区域进行围绕,这里需要注意的是此效果必须在服务器端预览,本地预览会报图片跨域问题,给定的图片必须是有透明区域的图片
渐变值
shape-outside: linear-gradient;
按照给定的渐变通过计算排除透明通道后得到的形状,然后文字按照此形状的边缘进行环绕
最后:函数值/url/linear-gradient可以和关键字属性值搭配使用,此时关键字属性作为基本形状提供相应的参考框盒。
5. 改变元素的显示区域
clip-path
使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。且此方式原来的区域仍然存在,只是显不显示的问题。裁剪之后只有规定的区域可以显示。
基本语法
clip-source | basic-shape | geometry-box | none
其中:
clip-source: 用url表示裁切元素的路径
basic-shape:一种形状,其大小和位置由几何盒值定义。如果没有指定几何框,则边框将用作参考框
- inset
- circle
- ellipse
- polygon
以上的函数值的使用和
shape-outside
中函数值的使用方式是一样的。且使用以上方式,可以任意指定裁切形状。geometry-box:几何盒,如果同 <basic-shape>一起声明,它将为基本形状提供相应的参考框盒。
margin-box
使用margin-box作为引用框
border-box
padding-box
content-box
fill-box
利用对象边界框作为引用框
stroke-box
使用笔触边界框作为引用框。
如果单独使用以上方式,和使用
basic-shape
相比裁切的形状有一定的局限性。如果和basic-shape
一起声明,那么会作为基本形状作为参考,比如:inset内移方式,可以通过指明基本形状来创建裁切形状。
CSS float浮动布局相关推荐
- CSS Float 浮动布局
文章目录 前言 一.Float 布局 二.属性值 三.代码实现 clear 清除浮动 clear 属性值 三.Float 设计初衷与不足 不足 总结 前言 在页面开发的过程中,CSS 页面布局技术允许 ...
- CSS之float浮动布局
css之float浮动布局 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 1. 浮 ...
- CSS Float(浮动)
2019独角兽企业重金招聘Python工程师标准>>> 什么是CSS Float(浮动)? CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动 Float(浮动),往往 ...
- 对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
- html中左浮动怎么写,div css float浮动用法(left right)
div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动教程篇 Css样式的float浮动属性,用于设置标签对象(如: 标签盒子.标签.标签.标签 ...
- php浮动边框设置属性,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
- html float属性6,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
- CSS float浮动的深入研究、详解及拓展(二)
为什么80%的码农都做不了架构师?>>> 接上回- 五.浮动的非本职工作 浮动的本职工作是让匿名inline boxes性质的文字环绕图片显示,而其他所有用浮动实现的效果都不是 ...
- (12)css—float浮动样式
一.什么是浮动? 浮动是一种非常重要的布局属性. 属性名:float,漂流.浮动的意思. 属性值:left 左浮动 right 右浮动 作用:让元素脱离标准流,同一级的浮动的元素可以并排在一排显示. ...
最新文章
- javax.mail API
- OSPF(Open Shortest Path First开放式最短路径优先)
- 公司的5GWiFi延迟有多低?来看图体验一下!
- java resources 路径_Java工程读取resources中资源文件路径问题
- EasyExcel实现写操作
- Cloud for Customer的工作中心(work center)加载器
- 利用Jqurey写一个输入内容增加并且可以删除,上下移动的标签
- html 图片使用scale,缩放:scale() - CSS3 | 绿叶学习网
- c语言程序设计实验周信东指针,C语言程序设计实验4数组周信东
- NETCF运行平台检测
- 四种方式话Equal
- 视觉SLAM十四讲学习笔记-第三讲-旋转矩阵和Eigen库
- 蓝桥杯 2017年C语言组大学B组 C/C++
- Vue 教程第十一篇—— vue-cli
- centos7 ACL
- 深入理解分布式事务(XA及rocketmq事务)
- 关于DM8168中移植算法速度慢、效率低的新发现
- Creo二次开发:参数化设计
- C#textbox和label显示皆透明如何修改/让字体和背景透明
- 爬取ajax加载的豆瓣电影