CSS盒子的浮动

在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界;而在竖直方向和兄弟元素依次排列,不能并排。使用“浮动”方式后,块级元素的表现就会有所不同。
      CSS中有一个float属性,默认为none,也就是标准流通常的情况。如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,同时默认情况下,盒子的宽度不在伸展,而是根据盒子里面的内容的宽度来确定。

准备基础代码

      浮动的性质比较复杂,这里先制作一个基础的页面,代码如下。后面一系列的实验将基于下面的代码为基础,并根据不同的知识点添加不同的新代码。

复制代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {margin:15px;font-family:Arial; font-size:12px;
}
.father {background-color:#ffff99;border:1px solid #111111;padding:5px;                
}
.father div {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的浮动方式*/
}
</style>
</head>
<body><div class="father"><div class="son1">Box-1</div><div class="son2">Box-2</div><div class="son3">Box-3</div><p>这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字,这里是浮动框外围的文字.</p></div> </body> </html>
复制代码

      上面的代码定义了4个<div>块,其中的一个父块,另外3个是它的子块。为了便于观察,将各个块都加上了边框以及背景颜色,并且让<body>标记以及各个div之间有一定的margin值。如果3个子div都没有任何浮动设置,就为标准流中的盒子状态。在父盒子中,4个盒子各自向右伸展,竖直方向依次排列,如下图。

       下面开始在这个基础上做实验,通过一些列的实验,就可以充分体会到浮动盒子具有哪些性质了。 

实验一:设置第一个浮动的div

.son1 {
       float: left;      
}

      效果如下图,可以看到标准流中的Box-2的文字在围绕着Box-1排列,而此时Box-1的宽度不再伸展,而是能容纳下内容的最小宽度。与此同时,由于Box-1脱离了标准流,而标准流中的Box-2会顶到原来Box-1的位置,因此Box-2的左边框与Box-1的左边框重合

实验二:设置第二个浮动的div

      继续将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构成的。

实验三:设置第三个浮动的div 

      接下来,我们把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的内容修改为: 

<div class="son3">Box-3<br>Box-3<br>Box-3<br>Box-3
</div>

      效果如下图:

      如果不希望文字围绕浮动的盒子,又该如何呢?此时对围绕文字所在标签<p>的样式进行如下修改后,从下面的效果图中可以看出,段落的上边界向下移动,直到文字不受左边的两个盒子影响位置,但仍然受到Box-3的影响。

.father p {border:1px dashed #111111;background-color:#ff90ba;clear:left;
}

      接着,将clear属性设置为right,将看到如下效果。由于Box-3比较高,因此清除了右边的影响,自然左边也就不会受到影响了。还有说明的是可以将clear属性设置为both,从直接消除左右两边浮动盒子的影响。 

实验八:扩展盒子的高度

      关于clear的应用,这里再给出一个例子,将文字所在的段落<p>标签删除,这时在父div里面只有3个浮动的盒子,它们都不在标准流中,这时浏览器的显示效果如下:

      可以看到,文字段落被删除以后,父div的范围缩成一条,是由padding和border构成的,也就是说,一个div的范围是由它里面的标准流内容决定的,与里面的浮动内容无关。下面将介绍一种方法以使父div的范围能够包含3个浮动的子div,见如下修改后的HTML代码和与之对应的效果图。

复制代码
<div class="father"><div class="son1">Box-1<br>Box-1</div><div class="son2">Box-2</div><div class="son3">Box-3<br>Box-3<br>Box-3<br>Box-3</div><div style="clear:both;border:0;padding:0;margin:0;"></div>
</div>
复制代码

注:该篇博客源自《CSS设计彻底研究》中的第四章,书中的例子简明扼要、通俗易懂,因此特copy下来与大家分享,同时也便于今后自己的在线查阅。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369024.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

servlet中url-pattern之/与/*的区别

转载于:https://www.cnblogs.com/hwgok/p/8835350.html

很少使用“ ControlFlowException”

控制流是命令式编程的“遗留物”&#xff0c;它已泄漏到其他各种编程范例中&#xff0c;包括Java的面向对象范例 。 除了有用的和无处不在的分支和循环结构外&#xff0c;还包括原语&#xff08;例如GOTO&#xff09;和非局部变量&#xff08;例如异常&#xff09;。 让我们仔细…

java的if里有多个if_代码里写很多if会影响效率吗?

看你怎么写 if.嵌入很多层if的代码叫做“箭头代码”&#xff0c;是一个anti-pattern。 这种代码会增加程序的循环复杂度 (Cyclomatic complexity)具体可以看这里&#xff1a;Flattening Arrow Code这里&#xff1a;总的来说&#xff0c;程序里用if-else是有开销的。每次conditi…

python基础总结(6)

一、模块。 一个模块就是一个python文件&#xff0c;.py文件。 需要注意的是&#xff1a;自己创建模块时要注意命名&#xff0c;不能和Python自带的模块名称冲突。例如&#xff0c;系统自带了sys模块&#xff0c;自己的模块就不可命名为sys.py&#xff0c;否则将无法导入系统自…

[10.10模拟] water

题意&#xff1a; 有一块矩形土地被划分成 n*m 个正方形小块。这些小块高低不平,每一小块都有自己的高度。水流可以由任意一块地流向周围四个方向的四块地中,但是不能直接流入对角相连的小块中。一场大雨后,由于地势高不同,许多地方都积存了不少降水。给定每个小块的高度,求每个…

使用Amazon Web Services(EC2)

正如我上周参加技术动手AWS培训之前所发布的。 这些天的课程当然是我以前使用过的标准EC2和S3服务。 除此之外&#xff0c;我们还使用了RDS &#xff0c; Elastic Load Balancing &#xff0c; SNS和VPC &#xff0c; Elastic Beanstalk并讨论了许多术语和业务案例。 在本文中&…

java整型和浮点型_Java基本的程序结构设计 整形和浮点型

整形&#xff1a;int 4字节short 2字节long 8字节byte 1字节int的大小差不多是20亿。整形计算如果两个int进行加减乘除数学运算的时候&#xff0c;最终的结果仍然是int&#xff0c;有可能出现了溢出&#xff0c;那么结果就不是我们想要的了。如下&#xff1a;System.out.printl…

盒子模型阴影设置,爱奇艺阴影配置

box-shadow的配置阴影 ul li:hover{ border-color: #dfdfdf; border-radius: 10px; -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 5px 5…

Linux在线扫描热添加的SCSI/iSCSI设备

SCSI接口具有应用范围广、多任务、带宽大、CPU占用率低&#xff0c;以及热插拔等优点&#xff0c;在服务器中广泛的应用。 当然在虚拟化平台支持下&#xff0c;也能模拟出SCSI设备&#xff0c;方便在虚拟机上热添加SCSI设备&#xff08;一般是硬盘&#xff09; 但是在热添加SCS…

第四周PSP

1.本周PSP 2.本周进度条 3.本周累计进度图 代码积累折线图 博文字数积累折线图 4.本周PSP饼状图 转载于:https://www.cnblogs.com/yuanyue-nenu/p/7648565.html

适用于JDeveloper 11gR2的Glassfish插件

众所周知&#xff0c; ADF Essentials是使用Java构建Web应用程序的绝佳框架&#xff0c;它可以自由开发和部署。 您可以在Glassfish&#xff08;3.1&#xff09;服务器上部署ADF Essentials应用程序。 但是&#xff0c;JDeveloper并不带有嵌入式Glassfish服务器&#xff0c;而是…

java 李刚 pdf_Java数据库技术详解(李刚) PDF_源雷技术空间

资源名称&#xff1a;Java数据库技术详解(李刚) PDF第一篇 数据库基础篇第1章 Java和数据库 21.1 Java概述 21.1.1 跨平台性 21.1.2 面向对象 21.1.3 安全性 31.1.4 简单性 31.1.5 健壮性和自动内存管理 31.2 Java的开发和运行环境 31.2.1 JDK的安装 31.2.2 配置JDK的环境变量 …

html css3模拟心的跳动

<!DOCTYPE html> <html> <head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><title>模拟心的跳动</title> </head> <style type"text/css">* {m…

-------------------前端技术文章收集-------------------

十个最常见的lodash方法 十个必备的js工具函数 (英文原文) You dont need 系列 underscore常用方法 (长期更新) 转载于:https://www.cnblogs.com/skura23/p/7649405.html

bzoj4152: [AMPPZ2014]The Captain

水。。。 这个建边排序一下从一边连向一边 dij在这种稀疏图果然不够优秀啊。只是学了一发。 #include<cstdio> #include<iostream> #include<cstring> #include<cstdlib> #include<algorithm> #include<cmath> #include<queue> usin…

使用Hibernate的JPA 2.0标准查询

JPA 2.0中引入了条件查询 。 借助条件查询&#xff0c;您可以以类型安全的方式编写查询。 在进行标准查询之前&#xff0c;开发人员必须通过构建基于对象的查询定义来编写查询。 构建查询时&#xff0c;可能会出现语法错误的情况。 条件查询API提供了创建具有编译时安全性的结构…

response对象的使用

使用response对象提供的sendRedirect()方法可以将网页重定向到另一个页面。重定向操作支持将地址重定向到不同的主机上&#xff0c;这一点与转发是不同的。在客户端浏览器上将会得到跳转地址&#xff0c;并重新发送请求链接。用户可以从浏览器的地址栏中看到跳转后的地址。进行…

java 菜单 分隔符_在Java中使用分隔符连接值列表最优雅的方法是什么?

我从来没有找到一个整洁(呃)的方式来做以下事情.说我有一个列表/数组的字符串.abcdefghijkl我想将它们连接成一个由逗号分隔的单个字符串,如下所示&#xff1a;abc,def,ghi,jkl在Java中,如果我这样写(原谅语法),String[] list new String[] {"abc","def",…

thinkphp3.2----实现伪静态和路由配置

URL模式&#xff1a; 0.普通 http://localhost/qixin/ThinkCMF(test)_backup/index.php?guser&mlogin&aindex    带有&#xff1f;号这种传参路径&#xff0c;对SEO不友好 1.pathinfo http://localhost/qixin/ThinkCMF(test)_backup/index.php/user/login/ind…

Cmder - 在右键菜单添加Cmder Here

使用命令行或终端工具的时候都有一个让我们觉得麻烦的问题&#xff0c;就是需要cd很多目录达到目标位置。在可视化操作系统下面我们一般都是已经处在目标目录了&#xff0c;这时需要执行某些命令如&#xff1a; python test.py   现在只需要右键点击"Cmder Here"即…