html塌陷问题和解决方案

最新推荐文章于 2023-12-19 18:02:15 发布

pro_12306

最新推荐文章于 2023-12-19 18:02:15 发布

阅读量1.7k

点赞数

分类专栏： Html&Css

本文链接：https://blog.csdn.net/qq_29393273/article/details/84453880

版权

Html&Css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

问题描述：如果父元素只包含了浮动元素，那么父元素在未设置高度的同时，则父元素高度塌缩为零;

解决方案：（使用clear属性）

1.创建一个用来清除浮动的css样式类（.clearfix）
2.针对包裹的全是浮动元素的父级容器使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{border: 10px solid red;}
			#boxa{width: 30%; height: 40px;float: left; background: #ADFF2F;}
			#boxb{width: 70%; height: 40px;float: left;background: #00FFFF;}
	.clearfix{zoom:1}/*//IE浏览器的专用属性（针对IE*/）
    .clearfix:after{/*//伪对象选择符 （在这个对象被浏览器渲染后添加一定的内容）*/
       content:".";/*//添加内容写在这里的属性值 这个属性是专门配合伪类对象,必须写;*/
       display:block;/*//将添加的内容转换为块级元素*/
       visibility:hidden;/*//可视化属性；控制元素是否可见;无论是否可见，保留物理空间；和display属性不同;*/
       height:0;/*//将添加进去的内容的高度设置为0；消除其占位；*/
       clear:both;/*//将添加去的内容作为清除浮动的对象，实现外围对象中有内容存在，因此可以自动判断高度;（告诉浮动元素说不要出现在我的两边）*/
     }
    
		</style>
			
	</head>
	<body>
		<div id="box" class="clearfix">
			<div id="boxa"></div>
			<div id="boxb"></div>
		</div>
	</body>
</html>

其他解决方案：https://www.jianshu.com/p/0860f7644dea

pro_12306

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
html塌陷问题和解决方案

问题描述：如果父元素只包含了浮动元素，那么父元素在未设置高度的同时，则父元素高度塌缩为零;解决方案：（使用clear属性）1.创建一个用来清除浮动的css样式类（.clearfix） 2.针对包裹的全是浮动元素的父级容器使用<!DOCTYPE html><html> <head> <meta charset="UTF-8"...
复制链接

扫一扫