php浮动边框设置属性,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动。
目录:
1. 页面布局方式:介绍文档流、浮动层以及float属性。
2. float:left :介绍float为 left 时的布局方式。
3. float:right :介绍float为 right 时的布局方式。
4. 相邻元素含有float属性:介绍相邻元素含有float属性时的布局方式。
1. 页面布局方式
页面布局方式,主要包含:文档流、浮动层、float属性。
1.1 文档流
HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行。
1.2 浮动层
浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框。
而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素。内联元素:有空隙就插入。
1.3 float 属性介绍
① left :元素向左浮动。
② right :元素向右浮动。
③ none :默认值。
④ inherit :从父元素继承float属性。
1.4 示例
2.3-float属性
#a {
background-color:Red;
height:50px;
width:100px;
}
#b {
background-color:Yellow;
height:50px;
width:200px;
}
#c {
background-color:Blue;
height:50px;
width:300px;
}
#d {
background-color:Gray;
height:50px;
width:400px;
}
p-a
p-b
p-c
p-d
2. float:left
说明:元素向左浮动。
2.1 代码变更
input2 添加:float:left
p-b 添加:float:left
p-d 添加:float:left
2.2 变更后视图
① 浏览器的宽度“不够长”时
② 浏览器的宽度"够长"时
2.3 结论当前元素分类(float:left)下一个紧邻元素分类(不含float)结论
块级元素(a)块级元素(b)b会填充a遗留下来的空间,a会和b发生重叠,a的图层在上面。
内联元素(b)b会紧跟在a的后面。并根据自身内联元素的特点,是否换行。
内联元素(a)块级元素(b)b不会跟随a的移动。
内联元素(b)b会紧跟在a的后面。并根据自身内联元素的特点,是否换行。
3. float:right
说明:元素向右浮动。
3.1 代码变更
input2元素:添加 float:right
p-b 添加:float:right
p-d 添加:float:right
3.2 变更后视图
① 浏览器的宽度“不够长”时
② 浏览器的宽度"够长"时
3.3 结论当前元素分类(float:right)下一个紧邻元素分类(不包含float)结论
块级元素(a)块级元素(b)b会填充a遗留下来的空间,若a会和b发生重叠(父容器宽度减少),a的图层在上面。
内联元素(b)b会填充a遗留下来的空间。
内联元素(a)块级元素(b)b不会跟随a的移动。
内联元素(b)b会填充a遗留下来的空间。
4. 相邻元素含有float属性
因内联元素的特性,最好别把内联元素与块级元素相邻使用float属性。
下面都以块级元素为例:
默认视图:
4.1 float:left
给这三个p都添加 float:left
4.1.1 视图
①浏览器的宽度"足够长"
②浏览器的宽度"不够长"
4.1.2 结论
Ⅰ 相邻的浮动元素,left属性最前面的元素,排在最左面。
Ⅱ 成为浮动元素后,在浮动层拥有内联元素的"特性",当多个浮动元素1排容不下时,就换行。
4.2 float:right
给这三个p都添加 float:right
4.2.1 视图
①浏览器的宽度"足够长"
②浏览器的宽度"不够长"
4.2.2 结论
Ⅰ 相邻的浮动元素,right属性最前面的元素,排在最右面。
Ⅱ 成为浮动元素后,在浮动层拥有内联元素的"特性",当多个浮动元素1排容不下时,就换行。
4.3 height高度不等的块级元素
把p-a的height值设为大于p-b,三个p都添加 float:left后:
4.3.1 视图
①浏览器的宽度"足够长"
②浏览器宽度缩小时
③浏览器宽度进一步缩小时
4.3.2 结论
Ⅰ height不相等的p浮动元素排序时,照拥有内联元素的"特性",当多个浮动元素1排容不下时,就换行。
4.3.3 解决浏览器宽度缩小变形
把添加float的属性的p元素嵌入在一个p中,并给此p添加width和height属性。浏览器宽度缩小时,也不会发生变形。
可参照 CSS HTML元素布局及Display属性介绍
更多CSS float 浮动属性 相关文章请关注PHP中文网!
本文原创发布php中文网,转载请注明出处,感谢您的尊重!
php浮动边框设置属性,CSS float 浮动属性相关推荐
- html中左浮动怎么写,div css float浮动用法(left right)
div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动教程篇 Css样式的float浮动属性,用于设置标签对象(如: 标签盒子.标签.标签.标签 ...
- html float属性6,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
- CSS float浮动布局
CSS float浮动布局 1. 清除浮动 2. 浮动边界 3. 浮动转换 4. 形状浮动 控制环绕模式 5. 改变元素的显示区域 属性值 选项 说明 left 向左浮动 right 向右浮动 non ...
- CSS Float(浮动)
2019独角兽企业重金招聘Python工程师标准>>> 什么是CSS Float(浮动)? CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动 Float(浮动),往往 ...
- 对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
- html设置边框dw,Dreamweaver表格边框设置的css语法大全
Dreamweaver表格边框设置的css语法大全 具体内容包括:上边框宽度.右边框宽度.下边框宽度.左边框宽度.边框宽度.边框颜色.边框样式.上边框.下边框.左边框.右边框.边框.宽度.高度.有关标 ...
- CSS float浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. float:left :介绍float为 left 时的布局方式. float ...
- (12)css—float浮动样式
一.什么是浮动? 浮动是一种非常重要的布局属性. 属性名:float,漂流.浮动的意思. 属性值:left 左浮动 right 右浮动 作用:让元素脱离标准流,同一级的浮动的元素可以并排在一排显示. ...
- CSS Float 浮动布局
文章目录 前言 一.Float 布局 二.属性值 三.代码实现 clear 清除浮动 clear 属性值 三.Float 设计初衷与不足 不足 总结 前言 在页面开发的过程中,CSS 页面布局技术允许 ...
最新文章
- Springboot 多文件上传
- 我的本地化关于NSDefaults
- 今天准备正式开博了!专注于Silverlight!
- BAT3四大巨头安全负责人破天荒聚在了一起,他们都说了什么?
- matlab降幂排序,Matlab教程(三)
- 第六讲 使用第三方库及简单网页
- AI创想秀,邂逅“华为云ModelArts”征文大赛——第一次收官
- Spark - About trend of ERP topic - serie 2employee
- python怎么返回上一行代码_Python实现判断一行代码是否为注释的方法
- python找第二大的数索引_python – 在numpy数组中查找多个值的行索引
- java中的getnumber怎么用_java安全编码指南之:Number操作详解
- python编程从入门到精通实践_《Python编程:从入门到实践》总结_Day01
- 求解线性方程组(SVD,QR,Gauss,LU)
- oracle instance client 下载,安装Oracle Instance Client
- matlab:圆形的图像识别(二)
- 18.ARP报文格式详解
- OutMan——C语言中字符串处理函数、内存管理和内存分区
- 个人调节税用计算机,2020税前个人所得税计算器_在线个税计算器_税后工资计算器...
- 解压RAR时出现“不可预料的压缩文件末端”的解决方法
- [python][IDLE]IDLE使用说明文档