CSS浮动
一、标准文档流
-
标准文档流指元素根据块元素或行内元素的特性按从上到下,从左到右的方式自然排列。 这也是元素默认的排列方式 ,浮动一般用于图片,也可用于页面布局
-
标准文档流的组成
- u块级元素(block)
- h1~h6 、p 、 div 、列表
- 内联元素(inline)
- span 、 a 、 img 、 strong
- u块级元素(block)
-
内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立
二、display属性
- block 块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符
- inline 内联元素的默认值。元素会被显示为内联元素,该元素前后没有换行符
- inline-block 行内块元素,元素既具有内联元素的特性,也具有块元素的特性
- none 设置元素不会被显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
p {display:inline}
p[class=a]{display:none}
</style>
</head>
<body>
<p>这两个段落生成内联盒子,和它的结果</p>
<p>这两个元素之间没有距离。</p>
<p class="a">这也是一个ps标签</p>
</body>
</html>
运行结果:
二、块元素排在一行的方法
可以使用什么属性使块元素排在一行?
- display的inline-block 属性
- float属性
三、浮动(float)
- left 元素向左浮动
- right 元素向右浮动
- none 默认值。元素不浮动,并会显示在其文本中出现的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
img
{
float:right;
}
</style>
</head>
<body>
<p>在下面的段落中,我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="logocss.gif" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>
运行结果:
四、边框塌陷
-
浮动元素脱离标准文档流
-
清除浮动
-
clear属性
- left 在左侧不允许浮动元素
- right 在右侧不允许浮动元素
- both 在左、右两侧不允许浮动元素
- none 默认值。允许浮动元素出现在两侧
<html>
<head>
<style type="text/css">
img
{
float:left;
clear:both;
}
</style>
</head>
<body>
<img src="/i/eg_smile.gif" />
<img src="/i/eg_smile.gif" />
</body>
</html>
运行结果:
五、溢出处理
Overflow属性
- visible 默认值。内容不会被修剪,会呈现在盒子之外
- hidden 内容会被修剪,并且其余内容是不可见的
- scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
- auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>
div.ex1 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;
}
div.ex2 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: hidden;
}
div.ex3 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
div.ex4 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: visible;
}
</style>
</head>
<body>
<h1>overflow 属性</h1>
<p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p>
<h2>overflow: scroll:</h2>
<div class="ex1">西安源代码软件技术服务有限公司下属的西部开源技术中心,座落于西部历史文化名城西安,是由一群热爱开源技术,热衷于Linux 技术推广的有志青年共同发起组织成立的西部首家公共服务机构。中心以推动Linux在西部的发展为目标,为西安、西部地区乃至全国电子商务与信息化建设提供Linux 技术支持服务。</div>
<h2>overflow: hidden:</h2>
<div class="ex2">西安源代码软件技术服务有限公司下属的西部开源技术中心,座落于西部历史文化名城西安,是由一群热爱开源技术,热衷于Linux 技术推广的有志青年共同发起组织成立的西部首家公共服务机构。中心以推动Linux在西部的发展为目标,为西安、西部地区乃至全国电子商务与信息化建设提供Linux 技术支持服务。</div>
<h2>overflow: auto:</h2>
<div class="ex3">西安源代码软件技术服务有限公司下属的西部开源技术中心,座落于西部历史文化名城西安,是由一群热爱开源技术,热衷于Linux 技术推广的有志青年共同发起组织成立的西部首家公共服务机构。中心以推动Linux在西部的发展为目标,为西安、西部地区乃至全国电子商务与信息化建设提供Linux 技术支持服务。</div>
<h2>overflow: visible (默认):</h2>
<div class="ex4">西安源代码软件技术服务有限公司下属的西部开源技术中心,座落于西部历史文化名城西安,是由一群热爱开源技术,热衷于Linux 技术推广的有志青年共同发起组织成立的西部首家公共服务机构。中心以推动Linux在西部的发展为目标,为西安、西部地区乃至全国电子商务与信息化建设提供Linux 技术支持服务。</div>
</body>
</html>
运行结果:
六、解决父级边框塌陷的方法
-
浮动元素后面加空div
简单,空div会造成HTML代码冗余
-
设置父元素的高度
简单,元素固定高会降低扩展性
-
父级添加overflow属性
简单,下拉列表框的场景不能用
-
父级添加伪类after
写法比上面稍微复杂一点,但是没有副作用,推荐使用
七、inline-block和float的区别
-
display:inline-block
- 可以让元素排在一行,并且支持宽度和高度,代码实现起来方便
- 位置方向不可控制,会解析空格
- IE 6、IE 7上不支持
-
float
- 可以让元素排在一行并且支持宽度和高度,可以决定排列方向
- float 浮动以后元素脱离文档流,会对周围元素产生影响,必须在它的父 级上添加清除浮动的样式