CSS

百度不在便捷，图片全部失效请多包涵。
前言
css定位机制
1. float属性介绍（浮动）
- 1.1fioat（浮动）的基本知识
- 1.1fioat（浮动）的基本语法
- - 1.1.1靠左浮动
  - 1.1.1靠右浮动
2.使用float（浮动）后产生的为题
- 2.1 高度塌陷问题（浮动溢出）
- - 2.1.1例子1：
  - 2.1.2例子2：
3. clear（闭合浮动又称清除浮动）
- 3.1 例子1：
- 3.2 例子2：
4.清除浮动常用方法（解决父元素塌陷）
- 4.1方法一（在浮动后添加一个空元素）
- 4.2方法二（给浮动的父元素添加 overflow：hidden；注：溢出：隐藏；）
- 4.3方法三（css3的:after伪元素）
总结

百度不在便捷，图片全部失效请多包涵。

前言

前面我们说过了CSS的背景样式和表格样式。本篇的内容主要讲述float浮动。后续还会有JS 的篇章。

css定位机制

普通流（标准流）：默认状态，元素自动从左向右，从上往下排列（写文章的顺序方式）。

浮动：本章讲述

绝对定位：后续讲述

1. float属性介绍（浮动）

讲述浮动之前，我们先回顾一下块元素和行内元素

块元素特征：1.独占一行。2.能设置它的宽和高。3.默认宽度是父元素的100%宽度。

都那些标签是块元素：div,p,ul,li,ol,dl,dt,dd,h1-h6等。

行内元素特征：1.可以和其他元素同行显示。2.不能能设置它的宽和高。3.宽高就是内容的宽高

都那些标签是行内元素：em,a,i,u,b,span…等。

1.1fioat（浮动）的基本知识

1.只能使元素向左或向右移动，不能上下移动。

2.浮动元素碰到包含框或者另一个浮动框，停止浮动。

3.浮动元素之后的元素将围绕它，之前的不受影响。

4.浮动元素会脱离标准流。

1.1fioat（浮动）的基本语法

float:left;  靠左浮动
float:right; 靠右浮动
float:none;  不适用浮动

使用：

<div style=" width: 800px; height: 800px; border: 1px solid #000;">
	<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=43774975,2349639287&fm=26&gp=0.jpg"  />
	<p>
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2] 
	</p>
</div>

效果：

我们用图片和文字来测试。

1.1.1靠左浮动

<div style=" width: 800px; height: 800px; border: 1px solid #000;">
	<img style="float:left;" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=43774975,2349639287&fm=26&gp=0.jpg"  />
	<p>
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2] 
	</p>
</div>

效果：

1.1.1靠右浮动

<div style=" width: 800px; height: 800px; border: 1px solid #000;">
	<img style="float:right;" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=43774975,2349639287&fm=26&gp=0.jpg"  />
	<p>
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2] 
	</p>
</div>

2.使用float（浮动）后产生的为题

2.1 高度塌陷问题（浮动溢出）

2.1.1例子1：

我们用一个宽高为400px 的大div 嵌套 3个高宽为100px的小div为例

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F;">
		ccc
	</div>
</div>

效果：

我们给 “aaa” div添加一个左浮动，看下有什么效果。

<div style=" width: 400px; height: 400px; border: 1px solid #000; ">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F;">
		ccc
	</div>
</div>

我们发现绿色的div 不见了，文字“bbb”和"ccc"重叠了。我们再使用有浮动试一试。

<div style=" width: 400px; height: 400px; border: 1px solid #000; ">
	<div style="width: 100px; height: 100px; background-color: #F00; float:right;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F;">
		ccc
	</div>
</div>

因为浮动的关系，“aaa”div 会从标准文档流中脱离出来。

所以下边的“bbb”和“ccc”div 会往上走把“aaa ”div 的位置占有。

“bbb”文字属于元素，前边我们说过浮动元素之后的元素将围绕它，但是因为“aaa”和“bbb”的高宽相等，所以“bbb”div里的文字无法在“bbb”div向上显示。

为了让你更清楚的理解，我们把“bbb”的div宽高设置成200px

<div style=" width: 400px; height: 400px; border: 1px solid #000; ">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left;">
		aaa
	</div>
	<div style="width: 200px; height: 200px; background-color: #0F0;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F;">
		ccc
	</div>
</div>

我们发现“bbb”的div向上移动，且它的元素（文字）在div中显示且围绕左浮动“aaa”div。

下面我们试一下，所有div 左浮动。

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:left;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:left;">
		ccc
	</div>
</div>

这样我们就实现了横向展示的效果，它们实现的原理是：

先向前找是否有同向浮动的元素，没有则紧贴父元素的边，如果有则贴着前一同向浮动元素的另一侧。

“aaa”div 左浮动是，没找到同向浮动元素，紧贴父元素的左边。

“bbb”div左浮动是，发现前面有同向浮动元素aaa，那就贴着aaa右边站好。

“ccc”div左浮动是，发现前面有同向浮动元素bbb，那就贴着bbb右边站好。

下面我们试一下，所有div 右浮动。

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:right;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:right;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:right;">
		ccc
	</div>
</div>

同上一效果中黄色标记的文字所述。

2.1.2例子2：

我们用一个宽为400px 高为自适应的大div 嵌套 3个高宽为100px的小div为例

<div style=" width: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F;">
		ccc
	</div>
</div>

我们给 “aaa” div添加一个左浮动，看下有什么效果。

<div style=" width: 400px; border: 1px solid #000; ">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F;">
		ccc
	</div>
</div>

和例1效果几乎相同。因为高度是自适应，“aaa”div脱离标准文档流，所以“aaa”div 的高度没有被计算进去

我们全部左浮动

<div style=" width: 400px; border: 1px solid #000; ">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:left;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:left;">
		ccc
	</div>
</div>

元素自适应宽高，是根据所有子元素的宽合和高合，子元素浮动后不被计算在内。所以，子元素全部具有浮动效果事，父元素的宽高均会塌陷。

3. clear（闭合浮动又称清除浮动）

clear:left;  清除左浮动
clear:right; 清除右浮动
clear:none;  不清除浮动
clear:both;  清除左右浮动

注：设置了float的元素会影响其他相邻的元素，需要使用clear清除浮动，clear只影响自身，不会对其他相邻元素造成影响。

3.1 例子1：

我们用一个宽高为400px 的大div 嵌套 3个高宽为100px 且左浮动的小div 为例

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left; ">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:left;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:left;">
		ccc
	</div>
</div>

下面我们清除aaa的左浮动。

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left; clar:left; ">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:left;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:left;">
		ccc
	</div>
</div>

并没有什么变化，前面我们说过clear只影响自身，不会对其他相邻元素造成影响。

下面我们再清除bbb的左浮动。

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left; clar:left; ">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:left;  clar:left; ">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:left;">
		ccc
	</div>
</div>

clear只影响自身，不会对其他相邻元素造成影响。

下面我们再清除ccc的左浮动。

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left; clar:left; ">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:left;  clar:left; ">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:left; clar:left;">
		ccc
	</div>
</div>

clear只影响自身，不会对其他相邻元素造成影响。

3.2 例子2：

我们用一个宽高为400px== 的大div 嵌套 3个高宽为100px 且右浮动的小div 为例

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:right;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:right;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:right;">
		ccc
	</div>
</div>

下面我们清除aaa的右浮动。

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:right; clar:right;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:right;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:right;">
		ccc
	</div>
</div>

clear只影响自身，不会对其他相邻元素造成影响。

下面我们再清除bbb的右浮动。

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:right; clar:right;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:right; clar:right;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:right;">
		ccc
	</div>
</div>

clear只影响自身，不会对其他相邻元素造成影响。

下面我们再清除bbb的右浮动。

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:right; clar:right; ">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:right; clar:right;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:right; clar:right;">
		ccc
	</div>
</div>

clear只影响自身，不会对其他相邻元素造成影响。

4.清除浮动常用方法（解决父元素塌陷）

例

<div style=" width: 400px; border: 1px solid #000; ">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:left;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:left;">
		ccc
	</div>
</div>

4.1方法一（在浮动后添加一个空元素）

在style标签内添加

.clear{
	clear:both;
}

在“ccc”div 后添加

为了方便演示写成行内样式

<div style=" width: 400px; border: 1px solid #000; ">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:left;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:left;">
		ccc
	</div>
	<div class="clear" style="clear:both;"> </div>
</div>

成功解决！

4.2方法二（给浮动的父元素添加 overflow：hidden；注：溢出：隐藏；）

给大div 添加

overflow:hidden;
 zoom:1;  触发hasLayout兼容IE6,7

可能有人疑问：

overflow：hidden；不是应该把溢出的内容隐藏吗？

在这里用到overflow属性触发新的块级格式上下文。

可以简单理解成，创建了新的盒子把浮动元素包含起来。

<div style=" width: 400px; border: 1px solid #000;  overflow:hidden; zoom:1;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:left;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:left;">
		ccc
	</div>
</div>

成功解决！

4.3方法三（css3的:after伪元素）

复制到style标签中

.clearfix:after{   
	content:'.';  内容为空 
	display:block; 转化成块元素
	height:0;       高度0
	visibility:hidden; 显示隐藏
	clear:both;      清除所有浮动
}
.clearfix{
zoom:1;    触发hasLayout兼容IE6,7
}

class="clearfix"添加到父元素中。

用伪元素追加了一个空盒子。和方法一类似。

<div class="clearfix"  style="  width: 400px; border: 1px solid #000; ">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:left;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:left;">
		ccc
	</div>
</div>

成功解决！

总结

本篇我们讲述了浮动以及清除浮动的用法，还讲述了几种解决浮动导致的父级元素塌陷的方法。

如本文章描述有误请尽快联系博主！感谢您的阅读与帮助！

CSS入门篇（float浮动）百度不在便捷，图片全部失效请多包涵。前言css定位机制1. float属性介绍（浮动）2.使用float（浮动）后产生的为题3. clear（闭合浮动又称清除浮动）4.清除浮动常用方法（解决父元素塌陷）总结

CSS

百度不在便捷，图片全部失效请多包涵。

前言

css定位机制

1. float属性介绍（浮动）

1.1fioat（浮动）的基本知识

1.1fioat（浮动）的基本语法

1.1.1靠左浮动

1.1.1靠右浮动

2.使用float（浮动）后产生的为题

2.1 高度塌陷问题（浮动溢出）

2.1.1例子1：

2.1.2例子2：

3. clear（闭合浮动又称清除浮动）

3.1 例子1：

3.2 例子2：

4.清除浮动常用方法（解决父元素塌陷）

4.1方法一（在浮动后添加一个空元素）

4.2方法二（给浮动的父元素添加 overflow：hidden；注：溢出：隐藏；）

4.3方法三（css3的:after伪元素）

总结

继续阅读

CSS的伪元素和伪类的区别

css伪类与伪元素区别

CSS中伪类和伪元素的区别

CSS的伪类与伪元素的区别

css中伪类与伪元素的区别

谈谈css的伪类和伪元素

伪类与伪元素的区别伪类与伪元素的区别

web前端布局练手项目

CSS----对字号的控制:Points, ems, pixels, 及其它单位,关键字,比例参数

赶工心得（一）

两种清除浮动的方法

如何成为一名.net 工程师?

tabpanel 使用问题

CSS之折叠菜单

DOM下元素 offset client scroll 相关属性简介

IE8 CSS设置DIV居中，添加“margin:0 auto”