正常网页开发如何解除父容器中子容器的浮动问题

最新推荐文章于 2022-06-06 15:50:58 发布

岁月可贵

最新推荐文章于 2022-06-06 15:50:58 发布

阅读量334

点赞数 3

分类专栏： css笔记文章标签： 1024程序员节 html5 css css3

本文链接：https://blog.csdn.net/weixin_44659458/article/details/109261892

版权

css笔记专栏收录该内容

17 篇文章 1 订阅

订阅专栏

一、问题引入

我们在浏览购物网站时，会出现一种情况就是我们不断滚动浏览器，网站会不断加载出图片。
在这里插入图片描述

此时，我们就发现一个问题-------图片肯定是放在每一个小盒子上，所有小盒子又放在一个大盒子上，如果这些小盒子采用浮动的形式排列(这里不考虑弹性盒子可看另外一篇博客)，大盒子的高度很明显是不方便给出来的，因为小盒子的个数是不确定的。
到了这里，我们会想那我们父盒子不给高度，通过子盒子来撑开父盒子不就可以了吗？但事实却不是这样的，下面举个例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>浮动带来的影响</title>
		<style type="text/css">
			.contaner{
				width: 598px;
				border: 1px solid green;
			}
			.item{
				width: 100px;
				height: 100px;
				float: left;
				background-color: pink;
				margin: 2px;
			}
			.box{
				width: 600px;
				height: 200px;
				background-color: yellowgreen;
			}
		</style>
	</head>
	<body>
	    <!--第一个产品站-->
		<div class="contaner">
			<div class="item"></div>
			<div class="item"></div>
		</div>
		<!--第二个产品站-->
		<div class="box"></div>
	</body>
</html>

我们想像中的效果是：
在这里插入图片描述

但实际效果是：
在这里插入图片描述
很明显，父容器高度为0(子元素处在浮动层，不占位置)，父容器没有将子容器的浮动给控制好，导致第二个父容器(标准流)出现上述情况为什么会出现这种情况可以看另外我的一篇博客。
注意：大家仔细看在大盒子的最上层有点粗(可能有点看不出来，大家修改一下颜色就可以看出来)，是父容器和另外一个父容器叠加的效果。

二、解决方法

问题分析：

前提这些小盒子是浮动的。
在网页开发中，只要小盒子个数不确定，父容器的高度是不方便给出的。
父容器盒子不给出的话，会影响到其他元素的布局。

综上所述：必须给盒子解除浮动

解决方法：

解决方法一额外标签法(隔墙法)W3C推荐的方法

<style type="text/css">
     .clear{
		clear: both;
		}
</style>

<div class="contaner">
			<div class="item"></div>
			<div class="item"></div>
			<div class="clear"></div>
		</div>

优：通俗易懂缺：结构性不好

解决方法二父级添加overflow属性

<style type="text/css">
     .contaner{
		overflow: hidden;
	}
</style>

<div class="contaner">
	<div class="item"></div>
	<div class="item"></div>
</div>

优：代码简洁缺：无法显示溢出部分

解决方法三父级添加after伪元素

<style type="text/css">
    .clearfix:after{
		 content: "";
		 display: block;
		 clear: both;
	     height: 0px;
		 visibility: hidden;
		}
	 .clearfix{
		*zoom: 1;
		}
</style>

<div class="contaner clearfix">
	<div class="item"></div>
	<div class="item"></div>
</div>

优：没有添加标签、结构更加简单缺：需要照顾低版本浏览器

解决方法四父级添加双伪元素

<style type="text/css">
   .clearfix:before,.clearfix:after{
		content: "";
		display: table;
		}
	.clearfix:after{
		clear: both;
		}
	.clearfix{
		*zoom: 1;
		}
</style>

<div class="contaner clearfix">
	<div class="item"></div>
	<div class="item"></div>
</div>

优：不用添加标签，代码更加简洁缺：需要照顾低版本浏览器

三、总结

弹性布局和浮动布局，我个人比较喜欢弹性布局，方便，使用起来比较简单。但浮动布局相比与弹性布局最大的不同在于：

浮动的元素具有行内元素的特性
浮动元素会脱离标准流(原来位置不保存)
浮动元素会一行显示并且元素顶部对齐
浮动的元素不会压住下面标准流的文字 (之所以不会压住文字，是因为浮动最初的目的是为了做文字环绕效果)

欢迎访问我的个人博客

岁月可贵

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
正常网页开发如何解除父容器中子容器的浮动问题

一、问题引入       我们在浏览购物网站时，会出现一种情况就是我们不断滚动浏览器，网站会不断加载出图片。       此时，我们就发现一个问题-------图片肯定是放在每一个小盒子上，所有小盒子又放在一个大盒子上，如果这些小盒子采用浮动的形式排列(这里不考虑弹性盒子可看另外一篇博客)，大盒子的高度很明显是不方便给出来的，因为小盒子的个数是不确定的。&nbs
复制链接

扫一扫