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 页面布局技术允许 ...
最新文章
- 李湘确逢“第二春” 1月已再婚11月便当妈(图)
- HD 1003 Max Sum (最大字段和问题)
- IT宅男们,有没有什么技术让你觉得相见恨晚?
- Arm Linux交叉编译和连接过程分析(1)
- VK Cup 2012 Round 1 D. Distance in Tree (树形dp)
- 浪漫星空python
- 【持续更新】并查集题目集合
- MATLABr2006a序列号
- 编程英语单词1.编程常用英语词汇大全
- smartdrv.exe 文件说明
- oracle单引号和双引号用法
- 大一计算机专业学期计划范文,大一新学期学习计划范文(通用5篇)
- idea从插件市场或者外部插件库导入插件的方式
- 必备的网络常用测试命令(ping命令)
- linux mint 安装ubuntu软件中心,Ubuntu和Linux Mint:安装Pinta 1.6工具
- Cache entry deserialization failed, entry ignored 错误解决
- appium自动化获取app的appPackage与appActivity方法总结
- 广告联盟识别作弊方法
- linux命令--mkdir 与文件权限
- android 打开屏幕,Android打开屏幕