html盒子浮动效果,有关CSS盒子浮动的方法详解
在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界;而在竖直方向和兄弟元素依次排列,不能并排。使用“浮动”方式后,块级元素的表现就会有所不同。
CSS中有一个float属性,默认为none,也就是标准流通常的情况。如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,同时默认情况下,盒子的宽度不在伸展,而是根据盒子里面的内容的宽度来确定。
准备基础代码
浮动的性质比较复杂,这里先制作一个基础的页面,代码如下。后面一系列的实验将基于下面的代码为基础,并根据不同的知识点添加不同的新代码。
body {
margin:15px;
font-family:Arial; font-size:12px;
}
.father {
background-color:#ffff99;
border:1px solid #111111;
padding:5px;
}
.father p {
padding:10px;
margin:15px;
border:1px dashed #111111;
background-color:#90baff;
}
.father p {
border:1px dashed #111111;
background-color:#ff90ba;
}
.son1 {
/* 这里设置son1的浮动方式*/
}
.son2 {
/* 这里设置son1的浮动方式*/
}
.son3 {
/* 这里设置son1的浮动方式*/
}
Box-1
Box-2
Box-3
这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字.
上面的代码定义了4个
块,其中的一个父块,另外3个是它的子块。为了便于观察,将各个块都加上了边框以及背景颜色,并且让
标记以及各个p之间有一定的margin值。如果3个子p都没有任何浮动设置,就为标准流中的盒子状态。在父盒子中,4个盒子各自向右伸展,竖直方向依次排列,如下图。
下面开始在这个基础上做实验,通过一些列的实验,就可以充分体会到浮动盒子具有哪些性质了。
实验一:设置第一个浮动的p
.son1 { float: left;
}
效果如下图,可以看到标准流中的Box-2的文字在围绕着Box-1排列,而此时Box-1的宽度不再伸展,而是能容纳下内容的最小宽度。与此同时,由于Box-1脱离了标准流,而标准流中的Box-2会顶到原来Box-1的位置,因此Box-2的左边框与Box-1的左边框重合。
实验二:设置第二个浮动的p
继续将Box-2的float属性设置为left,此时可以看到Box-2也变为根据内容确定宽度,并使Box-3的文字围绕Box-2排列。从下图中可以清晰的看出,Box-3的左边框仍在Box-1左边框下面,否则Box-1和Box-2之间的空白不会是深色,这个深色实际上就是Box-3的背景色,Box-1和Box-2之间的空白是由二者的margin构成的。
实验三:设置第三个浮动的p
接下来,我们把Box-3也设置为向左浮动,此时从下图中可以清楚的看到文字所在的盒子的范围,以及文字会围绕浮动的盒子排列。
实验四:改变浮动方向
将Box-3改为向右浮动,即float:right。此时效果如下图。
可以看到Box-3移动到了最右端,文字段落盒子的范围没有改变,但文字却夹在了Box-2和Box-3之间。此时,如果把浏览器窗口慢慢调整变窄,浏览器窗口就无法在一行中容纳Box-1到Box-3,Box-3会被挤到下一行中,但仍然保持向右浮动,这时文字会自动布满空间。
实验五:再次改变浮动的方向
将Box-2改为向右浮动,Box-3改为向左浮动。从下图可以看出布局没有变化,只是Box-2和Box-3交换了位置。
现在,再次回到实验中,把浏览器窗口慢慢变窄,当浏览器窗口无法在一行中容纳Box-1到Box-3时,和上一个实验一样会有一个Box被挤到下一个。那么这次被挤到下一行的是哪一个呢?答案是在HTML中写在后面的,也就是Box-3会被挤到下一行中,但仍然保持向左浮动,会到下一行的左端,这时文字仍然会自动排列,如下图。
实验六:全部向左移动
下面把3个Box都设置为向左浮动,然后再在Box-1中增加一行,使它的高度比原来高一些,如下图所示。
那么请想一想,如果继续把浏览器的窗口变窄,结果会如何呢?Box-3会被挤到下一行,那么它会在Box-1的下面,还是Box-2的下面呢?答案如下图。
Box-3被挤到下一行并向左移动,发现Box-1比Box-2高出一块儿,这样Box-3就会被卡住,进而停留在Box-2的下面。说道最后,需要非常注意的是,如果某个盒子被设置为float,那么它将脱离标准流,其后面的标准流中的盒子将不再受它影响。
实验七:使用clear属性清除浮动的影响
以使文字的左右两侧同时围绕浮动的盒子。首先将Box-1到Box-2的浮动都改为float:left,而Box-3的浮动为float:right,之后再将Box-3的内容修改为:
Box-3
Box-3
Box-3
Box-3
效果如下图:
如果不希望文字围绕浮动的盒子,又该如何呢?此时对围绕文字所在标签
的样式进行如下修改后,从下面的效果图中可以看出,段落的上边界向下移动,直到文字不受左边的两个盒子影响位置,但仍然受到Box-3的影响。
.father p {
border:1px dashed #111111;
background-color:#ff90ba;
clear:left;
}
接着,将clear属性设置为right,将看到如下效果。由于Box-3比较高,因此清除了右边的影响,自然左边也就不会受到影响了。还有说明的是可以将clear属性设置为both,从直接消除左右两边浮动盒子的影响。
实验八:扩展盒子的高度
关于clear的应用,这里再给出一个例子,将文字所在的段落
标签删除,这时在父p里面只有3个浮动的盒子,它们都不在标准流中,这时浏览器的显示效果如下:
可以看到,文字段落被删除以后,父p的范围缩成一条,是由padding和border构成的,也就是说,一个p的范围是由它里面的标准流内容决定的,与里面的浮动内容无关。下面将介绍一种方法以使父p的范围能够包含3个浮动的子p,见如下修改后的HTML代码和与之对应的效果图。
Box-1
Box-1
Box-2
Box-3
Box-3
Box-3
Box-3
html盒子浮动效果,有关CSS盒子浮动的方法详解相关推荐
- java 混音_Android中一种效果奇好的混音方法详解
初识音频 从初中物理上我们就学到,声音是一种波.计算机只能处理离散的信号,通过收集足够多的离散的信号,来不断逼近波形,这个过程我们叫做采样.怎么样才能更好的还原声音信息呢?这里很自然引出两个概念了. ...
- CSS 浮动布局放弃float,拥抱flex(详解)
CSS 浮动布局放弃float,拥抱flex(详解) 文章目录 CSS 浮动布局放弃float,拥抱flex(详解) 说明 Flex布局 容器和项目 容器属性 flex-direction属性 fle ...
- CSS clear 属性取值详解
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作 ...
- CSS HACK收集:在IE6下hack的方法详解
原文:http://www.html5cn.org/article-5027-1.html + 针对IE7 * 针对ie6和ie7 _ 针对ie6 最好采用条件注释的方法 本篇文章小编为大家介绍CS ...
- CSS中的BFC BFC详解 BFC可以解决的问题汇总
CSS中的BFC BFC详解 BFC可以解决的问题汇总 简介 BFC 全称 Block Formatting Context, 名为 "块级格式化上下文"它是CSS2.1规范定义的 ...
- html css主题,HTML+CSS=无限可能——案例详解:我的POI主题作品
原标题:HTML+CSS=无限可能--案例详解:我的POI主题作品 在微博发了这个作业,收到很多好评,实在太开心! 斌叔让我来投稿,那今天就以这个网页为案例,把制作过程中我的方法和经验分享给大家. 作 ...
- 定义html表格的大小和位置,点晴OA工作流表单设计:表格table及宏控件的HTML、CSS、字体参数教程详解...
点晴OA工作流表单设计:表格table及宏控件的HTML.CSS.字体参数教程详解 说明:虽然点晴OA内置了强大的富文本编辑器,但是很多时候还是难以实现理想的精确显示效果,为了实现满意的显示效果,网 ...
- CSS transition(过渡效果)详解
CSS transition(过渡效果)详解 通常当 CSS 的属性值更改后,浏览器会立即更新相应的样式,例如当鼠标悬停在元素上时,通过 :hover 选择器定义的样式会立即应用在元素上.在 CSS3 ...
- javascript写css样式,原生javascript实现读写CSS样式的方法详解
原生javascript实现读写CSS样式的方法详解 发布于 2017-05-24 15:05:31 | 120 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Jav ...
最新文章
- 压测接口线程数设置_ZAT掌门性能压测巡检系统实战和落地
- mysql 时区与时间函数
- 死磕 java同步系列之ReentrantReadWriteLock源码解析
- 遇到奇怪的C#/C/C++或者Java的bug可以去问问Coverity
- 5、【华为HCIE-Storage】--RAID类型
- 数据分析:复杂业务场景下,量化评估流程
- python怎么运行matlab代码_用python运行matlab代码
- 左移右移位运算_计算机硬件技术基础M2——计算机运算基础(二)
- Python布局管理器
- 运算符重载——左移运算符重载
- Linux Malloc分析-从用户空间到内核空间【转】
- python字符串和字节串有什么区别_python – 字符串和字节字符串之间的区别是什么?...
- 计算机网络-IP数据报计算(IP数据报分片)一个数据报部分长度为3400字节(使用固定首部)。现在经过一个网络传输,该网络的MTU为800字节:
- html 设置自动检测编码格式,CSS代码检查工具stylelint的使用方法详解
- IE10 CSS hack
- labview 判断整数_labview教程——如何判断字符串包含的是数字
- python之pygame,详解坦克大战
- Mall谷粒商城(基础篇的开发)
- 正态总体均值假设检验
- 写给想学Linux系统的人
热门文章
- atlas mysql怎么用,MySQL —— Atlas 使用
- 腾讯云cos html,腾讯云对象存储(COS)插件安装设置图文教程
- VS2022(Visual Studio)发布ASP.NET Core Web API应用到Web服务器(IIS)
- form表单与模板引擎
- Camera构图之三分法
- 人工智能、深度学习、机器学习常见面试题41~55
- Matlab中Gurobi安装和调试
- 2 Robotics: Computational Motion Planning 第2+3+4周 课后习题解答
- IoT企业物联网平台,从设备端到云端业务系统全链路开发实战——实践类
- 为什么微软拼音会莫名其妙变繁体以及Junit的一些笔记