CSS 浮动Float
文章目录
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>