大佬教程收集整理的这篇文章主要介绍了什么是浮动?浮动带来的影响?怎么清除浮动?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
浮动(float)最初是为了让文字环绕图片排布,就想报纸上面的图文混排模式。但 Web 开发人员很快意识到,任何东西都可以浮动,而不仅仅是图像,所以浮动的使用范围扩大了。浮动曾被用来实现整个网站页面的布局,它使信息列得以横向排列(默认的设定则是按照这些列在源代码中出现的顺序纵向排列)。目前出现了更新更好的页面布局技术,所以使用浮动来进行页面布局应被看作传统的布局方法。
在css中可以通过float
属性实现元素浮动,float
属性定义元素在哪个方向浮动,它有两个值float:left
和 float:right
,默认值为none
不区分行、块、行内块元素,使用浮动直接让元素变为块级
支持宽高、margin、padding,但不支持margin:auto
不会有空隙问题(块级不存在基线对齐)
<!DOCTYPE html> <html> <head> <@H_790_66@meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .container{ width: 300px; height: 300px; BACkground-color: #23A6D5; } img{ width: 100px; /* 设置图片左浮动 */ float: left; } </style> </head> <body> <div class="container"> <img src="./image/start.jpg"> <p>文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素文字环绕浮动元素</p> </div> </body> </html>
运行效果:
通过上述简单案例并不能直观的发现浮动带来的影响,这里我们只需要将以上demo的容器大小去掉,让内容撑开盒子就可发现问题所在!
得到效果如上所示,可以看出父元素高度塌陷,图片已经不在容器内了。这样的效果在网页开发中会严重影响网页布局
另外,如果父元素宽度不够,子元素浮动导致浮动元素掉落,元素会卡主
清除浮动需要使用
clear
属性,它有三个值:left、right、both
,left值定出左浮动,right值清除右浮动,both值清除所有浮动
这里另外用一个demo演示几种清除浮动的方法:
<!DOCTYPE html> <html> <head> <@H_790_66@meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .container{ padding: 5px; BACkground-color: #23A6D5; } p{ width: 50px; height: 50px; BACkground-color: red; margin: 5px; } </style> </head> <body> <div class="container"> <p>1</p> <p>2</p> <p>3</p> </div> </body> </html>
给p元素设置浮动效果后:
解决以上浮动带来的问题有以下几种方法:
clear:both
<div class="container"> <p>1</p> <p>2</p> <p>3</p> <div style="clear: both;"></div> </div>
overflow
为 hidden
或 auto
zoom:1
(IE)
after
伪元素清除浮动(推荐)clearfix
是父容器的class
名称content:""
是在父容器的结尾处放一个空白符height: 0
是让这个这个空白字符不显示出来display: block
clear: both
是确保这个空白字符是非浮动的独立区块zoom:1
支持IE6
以上是大佬教程为你收集整理的什么是浮动?浮动带来的影响?怎么清除浮动?全部内容,希望文章能够帮你解决什么是浮动?浮动带来的影响?怎么清除浮动?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。