IT兄弟连 HTML5教程 使用盒子模型的浮动布局
虽然使用绝对定位可以实现页面布局,但由于调整某个盒子模型时其他盒子模型的位置并不会跟着改变,所以并不是布局的首选方式。而使用浮动的盒子模型可以向左或向右移动,直到它的外边缘碰到包含它的盒子模型边框或另一个浮动盒子模型的边框为止。并且由于浮动的盒子模型不在文档的普通流中,所以文档的普通流中的盒子模型表现得就像浮动的盒子模型不存在一样。
1 设置浮动
在CSS中,我们通过float属性实现盒子区块框向左或向右浮动。其实任何元素都可以浮动,而浮动元素会生成一个块级框,而不论它本身是何种元素。但浮动的元素要指定一个明确的宽度,否则它们会尽可能地窄。
在图1所示的两张图片中,左边图片是按普通的文档流布局的三个盒子区块框,它们从上到下一个接一个地排列,位置由元素在HTML中的位置决定。而在右边的图片中,当把第一个区块框向右浮动时,它脱离普通文档流并且向右移动,直到它的右边缘碰到包含框的右边缘,而其他两个区块框就会在普通流中上移。
图1 CSS浮动属性的应用
另外,在图2.4所示的两张图片中,当将第一个区块框设置向左浮动时,它就会脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。这样,第一个区块框就不再处于文档流中,所以它也不占据空间,则第二个区块框就会在文档流中自动上移,但被设置左浮动的第一个区块框覆盖住了,从而使第二个区块框从视图中消失。解决这种情况可以对布局中的所有东西进行浮动。如果把所有三个区块框都向左移动,那么第一个区块框向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框,呈现在一行中排列,如图2右图所示。
图2 浮动设置的对比演示
假如在一行之上只有极少的空间可供区块框浮动,那么这个区块框会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。而如果浮动元素的高度不同,那么当它们向下移动时,可能被其他浮动元素“卡住”,如图3所示。
图3 空间不足的区块浮动演示
2 行框和清理
在进行页面布局时,经常需要设置多个区块框并列在一行中排列。最常见的方式就是使用float属性,再通过left或right值移动区块框向左或向右浮动。但当前面并列的多个区块框总宽度不足以包含框的100%时,就会在行框中留出一定的宽度,而下面的某个区块框又恰好满足这个宽度,则很可能会向上提,和上一行并列的区块框在同一行排列。而这并不是我们想要的结果,所以可以使用clear属性解决这一问题。该属性的值可以是left、right、both或none,它表示框的哪些边不应该挨着浮动框。如下所示:
如果不清除浮动,那么第三个区块框就会和第一、第二个区块框显示在一行中,又因为第一、第二个区块框设置了浮动就脱离了文档流,所以第三个区块框会在第一个区块框的下面,如图4所示。如果我们在第三个区块框的样式中加一个清除浮动clear:both,则设置第三个区块框两边都不能挨着浮动框,如图5所示,所以第三个区块框就会在下一行独立出现。代码如下所示:
图4 没有设置清浮动
图5 设置清浮动
对于以上这种情况,我们使用最多的方法还是会将“清除浮动”单独定义一个CSS样式,然后使用单独一个区块框来专门进行“清除浮动”。代码如下所示:
IT兄弟连 HTML5教程 使用盒子模型的浮动布局的更多相关文章
- IT兄弟连 HTML5教程 W3C盒子模型
日常生活中所见的盒子也就是能装东西的一种箱子,如果家里的东西很多,那么就需要按类别装到不同的箱子中.网页中的内容表现也是一样的,如果页面内容比较多,又想让页面更整洁.更美观.有很好的用户体验,则也需要 ...
- IT兄弟连 HTML5教程 使用盒子模型设计页面布局
布局所涉及的技术非常很多,足以另写单独的一本书了.在本节中主要介绍网站中最常用的布局方案,包括区块框居中.两列浮动.三列浮动及多列浮动的区块框. 1 居中设计 区块框居中的设计是在网页布局中常用的技 ...
- CSS基础之盒子模型及浮动布局
盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们日常生活中的盒子( ...
- IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作
学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
- [CSS属性设置,盒子模型,网页布局]
[CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- IT兄弟连 HTML5教程 HTML5和CSS3的关系
HTML5是第五版HTML的标准,CSS3则是第三版CSS,新增一些非常实用的选择器和样式属性,并且CSS3语言开发是朝着模块化发展的.以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为 ...
- IT兄弟连 HTML5教程 DIV+CSS网页标准化布局 小结及习题
小结 DIV+CSS布局页面的优势:表现和内容相分离.代码简洁,提高页面浏览速度.易于维护和改版.提高搜索引擎对网页的索引效率.每个HTML元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...
随机推荐
- java数据类型(大小等),变量定义,各进制书写方法
1. java中字符占两个字节,因为char类型占两个字节(16位),而C,C++中占1字节(8位). 2. 变量定义 第一步:声明(Declaration) 第二步:赋值(Assignment) 这 ...
- 爬虫框架Scrapy入门——爬取acg12某页面
1.安装1.1自行安装python3环境1.2ide使用pycharm1.3安装scrapy框架2.入门案例2.1新建项目工程2.2配置settings文件2.3新建爬虫app新建app将start_ ...
- Apache和PHP结合、Apache默认虚拟主机
5月28日任务 课程内容: 11.14/11.15 Apache和PHP结合11.16/11.17 Apache默认虚拟主机 11.14/11.15 Apache和PHP结合 到目前为止虽然安装好了A ...
- Spring 读取资源
Spring 读取资源 主要介绍3种方式(当然不止三种,但是这三种基本能应付大多需求)FileSystemResource:以文件的绝对路径方式进行访问ClassPathResourcee:以类路径的 ...
- ThreadLocal快速了解一下
欢迎点赞阅读,一同学习交流,有疑问请留言 . GitHub上也有开源 JavaHouse 欢迎star 1 引入 在Java8里面,ThreadLocal 是一个泛型类.这个类可以提供线程变量.每个线 ...
- 01-TensorFlow2.0基础
01-TensorFlow基础 Tensorflow是什么 Google的开源软件库 采取数据流图,用于数值计算 支持多种平台 - GPU.CPU. 移动设备 最初用于深度学习,变得越来越通用 Ten ...
- Cypher基本指令学习1
1.查询节点 查询所有节点match (n) return n 查询带有标签的节点 match(movie:Flyer) return movie.name 查询关联节点(查询A导演的所有电影) ma ...
- 自然语言处理(NLP)相关学习资料/资源
自然语言处理(NLP)相关学习资料/资源 1. 书籍推荐 自然语言处理 统计自然语言处理(第2版) 作者:宗成庆 出版社:清华大学出版社:出版年:2013:页数:570 内容简介:系统地描述了神经网络 ...
- Codeforces-501b
Misha hacked the Codeforces site. Then he decided to let all the users change their handles. A user ...
- SPOJ Distanct Substrings(求不同子串的数量)
Given a string, we need to find the total number of its distinct substrings. Input T- number of test ...