CSS 学习总结(4)— CSS中的 float 浮动
先说一下标准文档流,
1. 标准文档流
Web页面的制作,是个““流”,必须从上而下,像”织毛衣“。
-
标准文档流有以下特性:
- 空白会折叠,当出现多个空格、换行、tab时,都会折叠为一个空格。
- 高矮不齐,底边对齐。
- 自动换行,一行写不满,换行写。
-
在HTML中,标签分为文本级和容器级别。
文本级标签:p、span、a、b、img、u、em
。(因为p里面只能放文字、图片和表单元素,不能放h和ul,更不能放p,所以p为文本级标签。)
容器级标签:div、h系列、li、dt、dd
。
-
标准文档流等级严格,标签分为两种等级:行内元素(inline)和块级元素(block)。
-
在CSS中,和HTML很像,就p不一样。
行内元素:除了p以外的所有文本级标签,都是行内元素。
块级元素:所有容器级标签,加上p元素,都是块级元素。
-
行内元素与块级元素的不同:
例子:
<head> <style> div{ background-color: #86ff3c; width: 200px; height: 100px; } h1{ background-color: crimson; width: 200px; height: 80px; } span{ background-color: #e250d9; width: 200px; height: 80px; } </style> </head> <body> <div> 1号div </div> <h1> 大标题</h1> <span> span行内元素1</span> <span> span行内元素2</span> </body>
结果图:
案例中,我们给三个标签设置宽高,但发现,宽高属性值对块级元素h1,div生效。于是,可得结论:
块级元素和行内元素的区别:
- 行内元素:
与其他行内元素并排;
不能设置宽高,默认的宽度为文字的宽度。 - 块级元素:
霸占一行,不能与其他任何元素并列;
能接受宽高,如果不设置宽高,那么宽高默认为父级的100%。
- 行内元素:
2. display属性
可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。
值 | 说明 | 功能 |
---|---|---|
block | 块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符 | 块级元素和航迹元素的转换 |
inline | 行内元素的默认值,元素会被显示为行内元素,该元素前后没有换行符 | 块级元素和航迹元素的转换 |
inline-block | 行内块元素,元素既具有行内元素的特性,又具有块级元素的特性 | 控制块元素排列到一行,并设置宽高 |
none | 设置元素不会被显示 | 控制元素的显示和隐藏 |
-
块级元素转换为行内元素:
若给一个块级元素设置属性
display:inline;
,那么这个标签即变为行内元素。此时这个元素便不能设置宽高,qie可以和其他标签并排。<head> <style> div{ display:inline; background-color: #1a83ff; width: 200px; height: 80px; } h1{ display:inline; background-color: #86ff3c; width: 200px; height: 80px; } </style> </head> <body> <h1>我是h1标签</h1> <div>我是一个div标签1</div> <div>我是一个div标签2</div> </body>
结果图:
-
行内元素转换成块级元素:
同样,若给行内元素设置属性display:block;
,这个标签就变成块级元素。此时这个标签便能够设置高宽,霸占一行,不能与其他元素并排。<head> <style> span{ display: block; background-color: #e250d9; width: 200px; height: 100px; } </style> </head> <body> <span>span标签1</span> <span>span标签2</span> </body>
结果图:
-
既有行内元素,又有块级元素属性的元素:
<head> <style> h1{ display: inline-block; background-color: crimson; width: 300px; height: 200px; } #id{ display: inline-block; background-color: crimson; width:300px; height: 100px; } div{ display: inline-block; background-color: #86ff3c; width: 400px; height: 100px; } </style> </head> <body> <h1> h1大标题</h1> <h1 id="id">h1标题2</h1> <div> 1号div </div> </body>
结果图:
当三个元素的宽度超过包含框的宽度时,第三个元素向下移动。
那么,如何使块级元素排在一行,并且可以设置宽高?
上面的inline-block
属性可以实现此功能,但他仍没有脱离标准流,依然受限制。
在标准流中,限制非常多,也可以使元素脱离标准流。
在CSS中一共有三种手段,使一个元素脱离标准流:
1)浮动; 2)绝对定位; 3)固定定位。
此处要介绍的就是浮动(float)。
3. 浮动(float)
浮动是CSS里面布局用的最多的属性。
浮动的框可以向左或向右移动,制动它的外边缘碰到包含框或另一个浮动框的边框为止。
-
float属性:
属性值 功能 left 元素向左浮动 right 元素向右浮动 none 默认值,元素不浮动,并会显示在其文本中出现的位置 -
我们给块级元素
h1
和div
标签增加一个浮动属性float:left;
,此元素就可以并排,并设置宽高。<head> <style> div{ float: left; background-color: #86ff3c; width: 200px; height: 100px; } h1{ float: left; background-color: crimson; width: 200px; height: 80px; } </style> </head> <body> <div> 1号div </div> <h1> h1大标题</h1> </body>
结果图:
浮动之后:div
元素向左浮动,直到碰到边框,h1
元素向左浮动直到碰到div元素边框。没有添加
float
属性的之前的结果为:div
和h1
各霸占一行,如图,
-
给多个标签添加float属性:
<head> <style> h1{ float: left; background-color: crimson; width: 300px; height: 200px; } #id{ float: left; display: inline-block; background-color: #dc61c8; width:300px; height: 100px; } div{ float: left; background-color: #86ff3c; width: 400px; height: 100px; } </style> </head> <body> <h1> h1大标题</h1> <h1 id="id">h1标题2</h1> <div> 1号div </div> </body>
结果图:
当三个元素都设置float: left;
属性时,三个元素的宽度总和超过包含框宽度,此时第三个元素向下移动,三个元素的高度不同,第三个元素向下移动时,被第一个元素”卡住“。
inline-block和float的区别:
有上面的案例可以看出inline-block
和float
的区别。
-
相同点:
可以让元素排在一行,并且支持设置宽高。
-
不同点:
-
display:inline-block
:位置方向不可控制,会解析空格;
IE6、IE7上不支持。
-
float
:可以决定排列方向;
float浮动之后元素脱离文档流,会对周围的元素产生影响,必须在它的父级上添加清除浮动的样式。
-
4. 浮动清除
清除浮动就是指清除浮动与浮动之间的影响。
- 语法格式:
clear:属性值;
属性值 | 功能 |
---|---|
left | 在左侧不允许浮动元素 |
right | 在右侧不允许浮动元素 |
both | 在左右两侧不允许浮动元素 |
none | 默认值。允许浮动元素出现在两侧 |
-
案例说明:
我们给列表元素添加
float
,想得到的结果是,让一个容器里的元素浮动到一排。通过下面的程序,我们定义两组元素,想要实现每一组中的li排成一排。
<head> <style> li{ float: left; //添加float属性 background-color: #e250d9; width: 200px; height: 50px; } </style> </head> <body> <div> <ul> <li>星期一:吃草莓</li> <li>星期二:吃西瓜</li> <li>星期三:吃甜瓜</li> </ul> </div> <div class="div2"> <ul> <li>一日之计在于晨</li> <li>一年之计在于春</li> </ul> </div> </body>
结果图:
结果并非我们想要的,上图中第二组中的第一个li
去贴靠了第一组中的最后一个li
了,排成了一排。此时,我们需要清除浮动,给添加了
float
属性的元素的父级元素添加clear
属性。即给div
元素添加clear
属性。div{ clear: both; }
结果图:
清除了浮动属性下别人对自己的影响。两组div
排成两排。