(编辑:jimmy 日期: 2024/10/31 浏览:2)
浮动基本介绍
块级元素
和行内元素
,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可。float
属性来实现的。
属性值
描述
left
设置元素向左浮动。
right
设置元素向右浮动。
右浮动实践
class
属性值为.box1
元素设置为右浮动。代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>浮动</title> <style> .box{ width: 600px; border: 1px solid #000; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body> </html>
结果图
为什么结果图是一条边框线呢?因为在div
标签中还没有内容呢,现在我们将子div
标签设置宽高度为100px
像素并且添加背景颜色。
代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>浮动</title> <style> .box{ width: 600px; border: 1px solid #000; } .box1{ width: 100px; height: 100px; background-color: #f00; } .box2{ width: 100px; height: 100px; background-color: #0f0; } .box3{ width: 100px; height: 100px; background-color: #00f; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body> </html>
结果图
div
标签都是块级元素。class
属性值为.box1
的元素设置为右浮动。代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>浮动</title> <style> .box{ width: 600px; border: 1px solid #000; } .box1{ width: 100px; height: 100px; background-color: #f00; float:right; } .box2{ width: 100px; height: 100px; background-color: #0f0; } .box3{ width: 100px; height: 100px; background-color: #00f; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body> </html>
结果图
注意:现在我们发现calss
属性值为.box
元素高度变矮了,这就说明了(浮动元素它已经脱离了标准文档流,不再占用空间了)、并且向右浮动,浮动到自身的父元素的边缘位置就停止了浮动。
左浮动实践
让我们进入左浮动的实践,实践内容如:将class
属性值为.box1
元素设置为左浮动。
代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>浮动</title> <style> .box{ width: 600px; border: 1px solid #000; } .box1{ width: 100px; height: 100px; background-color: #f00; float:left; } .box2{ width: 100px; height: 100px; background-color: #0f0; } .box3{ width: 100px; height: 100px; background-color: #00f; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body> </html>
结果图
class
属性值为.box2
元素看不见的原因。结果图A
结果图B
class
属性值为.box
是一个池塘,3
个子元素都是能够漂浮在池塘水面上的东西,现在我们将calss
属性值为.box1
元素浮动起来,漂在池塘水面上,是不是就不再占用池塘内的空间了。class
属性值为.box2
元素看不见,并不代表它不存在只是被class
属性值为.box1
元素给遮挡住了,现在我们将class
属性值为.box2
元素宽度设置为150px
像素。代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>浮动</title> <style> .box{ width: 600px; border: 1px solid #000; } .box1{ width: 100px; height: 100px; background-color: #f00; float:left; } .box2{ width: 150px; height: 100px; background-color: #0f0; } .box3{ width: 100px; height: 100px; background-color: #00f; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body> </html>
结果图
注意:事实证明class
属性值为.box2
元素是存在的。
下面我们将calss
属性值为.box2
元素设置为左浮动看看有什么不一样的效果
代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>浮动</title> <style> .box{ width: 600px; border: 1px solid #000; } .box1{ width: 100px; height: 100px; background-color: #f00; float:left; } .box2{ width: 150px; height: 100px; background-color: #0f0; float: left; } .box3{ width: 100px; height: 100px; background-color: #00f; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body> </html>
结果图
class
属性值为.box2
的元素左浮动并没有左浮动到本身父元素的边缘位置,为什么在class
属性值为.box1
后面呢?因为父元素已经有了浮动的子元素后面的子元素在浮动就浮动到前面浮动的元素之后。class
属性值为.box3
的元素设置为左浮动,看看有什么不一样的效果。代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>浮动</title> <style> .box{ width: 600px; border: 1px solid #000; } .box1{ width: 100px; height: 100px; background-color: #f00; float:left; } .box2{ width: 150px; height: 100px; background-color: #0f0; float: left; } .box3{ width: 100px; height: 100px; background-color: #00f; float: left; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> </body> </html>
结果图
注意:浮动元素浮动以后,其父元素不再将浮动的子元素包裹在父元素之内,所以结果图出现一条黑色的边框线,若有不明白的看第一个实践内容。
将行内元素设置浮动
div
标签中的span
标签设置为左浮动。span
标签设置宽高度和背景颜色有什么效果。代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>浮动</title> <style> .box{ width: 600px; border: 1px solid #000; } .box1{ width: 100px; height: 100px; background-color: #f00; } .box2{ width: 100px; height: 100px; background-color: #0f0; } .box3{ width: 100px; height: 100px; background-color: #00f; } </style> </head> <body> <div class="box"> <span class="box1">微笑是最初的信仰1</span> <span class="box2">微笑是最初的信仰2</span> <span class="box3">微笑是最初的信仰3</span> </div> </body> </html>
结果图
span
标签设置了宽高度为100px
像素并没有生效,因为现在span
标签还是行内元素。span
标签设置左浮动,然后我们在看看效果如何。代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>浮动</title> <style> .box{ width: 600px; border: 1px solid #000; } .box1{ width: 100px; height: 100px; background-color: #f00; float: left; } .box2{ width: 100px; height: 100px; background-color: #0f0; float: left; } .box3{ width: 100px; height: 100px; background-color: #00f; float: left; } </style> </head> <body> <div class="box"> <span class="box1">微笑是最初的信仰1</span> <span class="box2">微笑是最初的信仰2</span> <span class="box3">微笑是最初的信仰</span> </div> </body> </html>
结果图
注意:行内元素设置为浮动之后就拥有了块级元素的特点。
设置浮动总结
为什么要清除浮动呢?
class
属性值为.box
元素的子类元素没有浮动前的效果实践。代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>清除浮动</title> <style> .box{ width: 600px; border: 1px solid #000; } .box1{ width: 100px; height: 100px; background-color: #f00; } .box2{ width: 100px; height: 100px; background-color: #0f0; } .box3{ width: 100px; height: 100px; background-color: #00f; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <h1>清除浮动</h1> </body> </html>
结果图
class
属性值为.box
元素的子元素左浮动之后影响到下面的元素排版布局实践。
代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>浮动</title> <style> .box{ width: 600px; border: 1px solid #000; } .box1{ width: 100px; height: 100px; background-color: #f00; float: left; } .box2{ width: 100px; height: 100px; background-color: #0f0; float: left; } .box3{ width: 100px; height: 100px; background-color: #00f; float: left; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <h1>清除浮动</h1> </body> </html>
结果图
现在大家应该明白了为什么要清除浮动了,有浮动就必须清除浮动,因为上面的元素设置了浮动就会影响到下面元素排版布局。
清除浮动有3种方式
第一种方式
600px
像素的高度,一起来看看效果如何。代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>清除浮动</title> <style> .box{ width: 600px; height: 600px; border: 1px solid #000; } .box1{ width: 100px; height: 100px; background-color: #f00; float: left; } .box2{ width: 100px; height: 100px; background-color: #0f0; float: left; } .box3{ width: 100px; height: 100px; background-color: #00f; float: left; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <h1>清除浮动</h1> </body> </html>
结果图
这样是解决了下面元素排版布局问题,但是笔者不推荐这么做,因为高度是由子元素的内容撑起来的高度,而不是我们给的固定高度。
第二种方式
其实在CSS
中也有清除浮动的属性,清除浮动属性名为clear。
clear属性值说明表
div
元素不能放置任何内容,它只能做一个件事情,那就是清除浮动并且将这个新创建的div
元素放在最后一个浮动元素的后面才会生效。both
属性值就可以了,左右清除浮动,干嘛还要计较它是左浮动或右浮动呢,直接清除左右浮动就ok
了。代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>清除浮动</title> <style> .box{ width: 600px; border: 1px solid #000; } .box1{ width: 100px; height: 100px; background-color: #f00; float: left; } .box2{ width: 100px; height: 100px; background-color: #0f0; float: left; } .box3{ width: 100px; height: 100px; background-color: #00f; float: left; } .clear{ clear: both; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="clear"></div> </div> <h1>清除浮动</h1> </body> </html>
结果图
注意:这才是我们真正想要的结果,并且从视觉上来看浮动的元素包裹在父元素之内的效果。
第三种方式
overflow
并且属性值为hidden
来清除浮动,必须将这个属性设置在浮动元素的父元素身上。overflow
并且属性值为hidden
,它原意是用来将溢出的部分内容进行隐藏,但是它还可以清除浮动。代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>溢出内容进行隐藏</title> <style> div{ width: 100px; height: 50px; border: 1px solid #000; } </style> </head> <body> <div> 微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。 微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。 微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。 </div> </body> </html>
结果图
下面笔者将溢出的内容进行隐藏。
代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>溢出内容进行隐藏</title> <style> div{ width: 100px; height: 50px; border: 1px solid #000; overflow: hidden; } </style> </head> <body> <div> 微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。 微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。 微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。 </div> </body> </html>
结果图
overflow
并且属性值为hidden
来清除浮动。代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>清除浮动</title> <style> ul{ list-style: none; } ul li{ float: left; border: 1px solid red; } </style> </head> <body> <ul> <li>微笑是最初的信仰1</li> <li>微笑是最初的信仰2</li> <li>微笑是最初的信仰3</li> <li>微笑是最初的信仰4</li> <li>微笑是最初的信仰5</li> <li>微笑是最初的信仰6</li> <li>微笑是最初的信仰7</li> <li>微笑是最初的信仰8</li> </ul> </body> </html>
结果图
注意:在这里笔者还没有给浮动元素清除浮动呢,大家可以明显的看到ul
标签高度为0
。
清除浮动实践
代码块
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>清除浮动</title> <style> ul{ list-style: none; overflow: hidden; } ul li{ float: left; border: 1px solid red; } </style> </head> <body> <ul> <li>微笑是最初的信仰1</li> <li>微笑是最初的信仰2</li> <li>微笑是最初的信仰3</li> <li>微笑是最初的信仰4</li> <li>微笑是最初的信仰5</li> <li>微笑是最初的信仰6</li> <li>微笑是最初的信仰7</li> <li>微笑是最初的信仰8</li> </ul> </body> </html>
结果图
现在我们很清楚的看到ul
标签高度为23px
像素,为什么要使用:属性为overflow
并且属性值为hidden
来清除浮动,因为ul
标签中只能使用li
标签元素不能使用其它元素,所以属性为overflow
并且属性值为hidden
来清除浮动是最好不过啦。
总结
以上所述是小编给大家介绍的CSS实现元素浮动和清除浮动的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!