css-1-浮动与高度塌陷

最新推荐文章于 2023-12-25 15:36:46 发布

Sallery

最新推荐文章于 2023-12-25 15:36:46 发布

阅读量216

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/Sallery/article/details/118303260

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、概念：设置了浮动属性的元素会

脱离标准普通流的控制
移动导指定位置

二、浮动解决的问题：

1、文字无法包围图片的问题

2、浮动解决莫名其妙的间隔问题

3、浮动可以向左向右排版对齐

三、理解总结

1、浮动可以设置元素脱离正常的文档流，向左向右靠近父元素的边缘或者设置了浮动的其他元素，因此最好将浮动的元素放在标准流的父元素中，以减少对其他标准流的影响。

2、对齐方式：子元素的盒子和元素的盒子对齐，不会超过父元素盒子的内边距padding

高度塌陷：因为浮动脱离正常的文档流导致出现的高度塌陷的问题。

1、正常情况下父元素不设置高度，子元素和默认撑开父元素，设置了子元素设置了浮动导致子元素脱离了正常的文档流，无法撑开父元素。同事会使下一行代码跑到父元素这一行。

解决高度塌陷：

clear：left/right/both 来清除浮动

1、直接设置父元素的高度

2、添加一个子元素来清除浮动

3、伪元素after设置clear:both，清除浮动，需要注意的是设置伪元素的时候需要设置conect=‘’；display=block；clear:both;

4、在父元素内加入overflow: hidden;触发bfc规则，是父元素变成一个封闭的箱子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.parnet{
				width: 600px;
				background-color: #0000FF;
				/* height: 600px;1、设置父元素高度消除高度塌陷 */
				/* overflow: hidden;4、触发bfc */
			}
			.child{
				width: 200px;
				height: 200px;
				background-color: #00FFFF;
				float: left;
			}
			/* .clear{
				clear: both;
			}2、最后一个元素来清除浮动 */
			/* .parnet::after{
				content: '';
				clear: both;
				display: block;
			}3、使用伪元素清除浮动 */
		</style>
	</head>
	<body>
		<div class="parnet">
			<div class="child"></div>
			<div class="child"></div>
			<div class="child " ></div>
			<div class="clear"></div>
			
		</div>
	</body>
</html>

如有问题请指正

Sallery

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-1-浮动与高度塌陷

一、概念：设置了浮动属性的元素会脱离标准普通流的控制移动导指定位置二、浮动解决的问题：1、文字无法包围图片的问题2、浮动解决莫名其妙的间隔问题3、浮动可以向左向右排版对齐三、理解总结1、浮动可以设置元素脱离正常的文档流，向左向右靠近父元素的边缘或者设置了浮动的其他元素，因此最好将浮动的元素放在标准流的父元素中，以减少对其他标准流的影响。2、对齐方式：子元素的盒子和元素的盒子对齐，不会超过父元素盒子的内边距padding高度塌陷：因为浮动脱离正常的文档流导致出现的
复制链接

扫一扫