文章目录
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列，在布局时非常有用。
★ 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
★ 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
一、float的基本介绍
- float中的四个参数
| 参数 | 描述 |
|---|---|
| float: left | 左浮动 |
| float: right | 右浮动 |
| float: none | 不浮动 |
| float: inherit | 继承父元素的浮动属性 |
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
* { /*清除边框*/
padding: 0;
margin: 0;
}
.test {
width: 100px;
height: 100px;
background: red;
border: 2px black dashed;
/*以下依次打开查看效果*/
/*float: left;*/
/*float: right;*/
/*float: none;*/
/*float: inhert;*/
}
</style>
</head>
<body>
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
</body>
-
div块未添加浮动 和 float属性设置为none及inherit的效果：
-
inhert表示继承父类标签的浮动属性，没有父类元素其浮动属性为none。
-
div块是块级元素，在没有设置浮动是默认是独占一行的。
-
-
div块float属性设置为left的效果：
为div块添加浮动属性div块就会脱离正常的文本流，不再独占一行，而是根据其大小采用流式布局。
-
div块float属性设置为right的效果：
二、实现文本环绕效果
1、文本环绕图片
<head>
<style>
.parent {
width: 400px;
height: 300px;
border: 1px solid green;
}
img {
/*以下依次打开查看效果*/
/*float: left;*/
/*float: right;*/
}
</style>
</head>
<body>
<div class="parent">
<img src="logo.jpg" width=200 alt="图片" >
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力
</div>
</body>
-
图片左浮动环绕文字
打开元素选择器img中的float: left行。
-
图片右浮动环绕文字
打开元素选择器img中的float: right行。
2、浮动遇上内联元素
任何元素只要添加上浮动属性，都会变成块级元素，内联元素（行内元素）也是如此。
<head>
<style>
.test {
width: 100px;
height: 100px;
background: red;
/*以下打开查看效果*/
/*float: left;*/
}
.brother {
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<span class="test">TEST</span>
<div class="brother">1</div>
</body>
-
span元素未添加浮动时
span本身是内联元素，其大小只是其内容的大小，本身是没有高度和宽度属性的。
-
span元素添加浮动时
span元素设置了浮动，脱离了正常的文档流的布局方式。
-
浮动块仍占据正常文档流的文本空间
浮动块仍会占据文本空间，后续的元素会在出除了浮动块的空间进行布局。
<head>
<style>
.test {
width: 100px;
height: 100px;
background: red;
float: left;
}
</style>
</head>
<body>
<span class="test">TEST</span>
01234567899876543210
</body>
3、文字环绕内联元素
<head>
<style>
.parent {
width: 320px;
height: 320px;
border: 1px solid green;
}
.test {
width: 100px;
height: 100px;
background: red;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<span class="test">TEST</span>
内联元素又名行内元素(inline element)，和其对应的是块元素(block element)，都是html规范中的概念。内联元素的显示，为了帮助理解，可以形象的称为“文本模式”，即一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素加上display:block这样的属性，让它也有每次都从新行开始的属性，即成为块元素同样我们可以把块元素加上display:inline这样的属性，让它也在一行上排列。
</div>
</body>
三、浮动的原因及副作用
1、原因及副作用
浮动使元素脱离了正常得标准流，同时影响周围的元素，一旦当前的元素进行浮动，其他的元素也会受到干扰。
浮动元素不在占有原始的空间，使父元素无法检测子元素的高度，从而导致塌陷的问题。
<head>
<style>
.parent {
width: 500px;
height: auto;
border: 1px solid #000;
}
.brother {
width: 100px;
height: 100px;
background: blue;
}
.child {
width: 80px;
height: 30px;
background: red;
border: 1px solid purple;
/*以下打开查看效果*/
/*float: left;*/
}
</style>
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
<div class="brother"><div>
</body>
- 子元素未浮动
- 子元素打开浮动
2、浮动副作用
- 从上面例子看浮动有以下两个副作用：
- 父元素无法检测到子元素的高度，导致父元素塌陷。
- 父元素塌陷，其兄弟元素位于子元素后出现异位。
四、浮动副作用的解决
- 手动给父元素添加高度
- 通过clear清除内部和外部浮动
- 给父元素添加overflow属性并结合zoom：1使用
- 给父元素添加浮动
1、手动给父元素添加高度
手动的给父元素添加高度，在增加多个子元素的时候，存在父元素的宽度不够，多余的子元素被挤出。
<head>
<style>
.parent {
width: 480px;
height: 32px;
border: 1px solid #000;
}
.child {
width: 100px;
height: 30px;
background: red;
border: 1px solid purple;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</div>
</body>
2、Clear属性
| 属性 | 描述 |
|---|---|
| clear: none | 允许有浮动对象 |
| clear: left | 不允许左边有浮动对象 |
| clear: right | 不允许右边有浮动对象 |
| clear: both | 不允许有浮动对象 |
<head>
<style>
.parent {
width: 260px;
height: 300px;
border: 1px solid grey;
}
.child1 {
width: 100px;
height: 100px;
background: red;
/*float: left;*/
/*float: right;*/
}
.child2 {
width: 150px;
height: 150px;
background: blue;
/*clear: left;*/
/*clear: right;*/
/*clear: both;*/
}
</style>
</head>
<body>
<div class="parent">
<div class="child1">1</div>
<div class="child2">2</div>
</div>
</body>
-
未添加浮动
-
添加左浮动，不添加清除浮动
-
添加左浮动，添加清除左浮动
与未添加浮动效果一样。
-
添加右浮动，不添加清除浮动
-
添加右浮动，添加清除左浮动
与添加右浮动，不添加清除浮动一致。
-
添加右浮动，添加清除右浮动
3、overflow与zoom
-
zoom属性
zoom是IE浏览器专有属性，zoom在非IE浏览器中表现为支持放大或者缩小，但是由于这个属性是一个不标准的css属性，因此一般在非IE浏览器中不用zoom来实现div 的缩放效果，要放大或者缩小直接用css3的transform属性。
-
overflow属性
规定当内容溢出元素框时发生的事情。
| 属性 | 描述 |
|---|---|
| overflow: visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| overflow: hidden | 内容会被修剪，并且其余内容是不可见的。 |
| overflow: scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| overflow: auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| overflow: inherit | 规定应该从父元素继承 overflow 属性的值。 |
<head>
<style>
.parent {
width: 500px;
height: auto;
border: 1px solid grey;
/*zoo配合overflow撑开父元素高度*/
overflow: hidden;
zoom: 1;
}
.child {
width: 100px;
height: 30px;
background: red;
border: 1px solid #000;
float: left;
/*float: right;*/
}
</style>
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
</body>
4、给父元素添加浮动
<head>
<style>
.parent {
width: 500px;
height: auto;
border: 1px solid black;
float: left;
}
.child {
width: 100px;
height: 30px;
background: red;
border: 1px solid #FFF;
float: left;
}
.brother {
width: 100px;
height: 100px;
background: blue;
/*clear: both;*/
}
</style>
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
<div class="brother">B</div>
</body>
-
发现父元素添加浮动可以让其高度根据子元素撑开，但有影响了周围的元素，这时的解决办法是给最周围的元素加上clear属性。
给 brother 加上clear属性
五、应用案例
制作网站导航栏。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航</title>
<style>
*{
padding: 0;
margin: 0;
}
.head {
width: 100%;
height: 64px;
}
.logo {
width: 150px;
height: 40px;
float: left;
}
.navi {
width: 320px;
height: 64px;
float: left;
}
.navi-li {
width: 80px;
height: 64px;
text-align: center;
line-height: 64px;
color: #000;
float: left;
}
.icons {
width: 200px;
height: 64px;
float: right;
}
.li1 {
width: 64px;
height: 64px;
float: left;
background: url(001.png) center center no-repeat;
}
.li2 {
width: 64px;
height: 64px;
float: left;
background: url(004.png) center center no-repeat;
}
.li3 {
width: 64px;
height: 64px;
float: left;
background: url(003.png) center center no-repeat;
}
</style>
</head>
<body>
<div class="head">
<div class="logo">
<img src="logo1.png" width="150" height="64" alt="logo">
</div>
<div class="navi">
<div class="navi-li">导读</div>
<div class="navi-li">论坛</div>
<div class="navi-li">空间</div>
<div class="navi-li">签到</div>
</div>
<div class="icons">
<div class="li1"></div>
<div class="li2"></div>
<div class="li3"></div>
</div>
</body>
</html>
扫一扫
437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
