CSS浮动（display、float、边框塌陷、溢出处理）

本文围绕CSS浮动展开，介绍了标准文档流的组成，包括块级元素和内联元素。阐述了display属性的不同值，以及使块元素排在一行的方法。详细讲解了浮动属性、边框塌陷问题及解决方法，还介绍了溢出处理，最后对比了inline - block和float的区别。

CSS浮动

一、标准文档流

标准文档流指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式，浮动一般用于图片，也可用于页面布局
标准文档流的组成
- u块级元素（block）
  - h1~h6 、p 、 div 、列表
- 内联元素（inline）
  - span 、 a 、 img 、 strong
内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

二、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 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式