清除浮动产生的问题

最新推荐文章于 2021-08-03 23:33:38 发布

qq_29319817

最新推荐文章于 2021-08-03 23:33:38 发布

阅读量276

点赞数

分类专栏：前端蜗牛爬行记 css 文章标签：清除浮动怎样清除浮动产生浮动效果 css

本文链接：https://blog.csdn.net/qq_29319817/article/details/76358814

版权

前端蜗牛爬行记同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

前言：

发现自己到了一个需要大量知识眼界的一个阶段，虽然遇到一个bug，但自己也会百度，找到大神的王道解法，当然那一瞬间，是多么感谢大神的，虽然解决方法不是唯一的，但解决问题无疑是多么的牛叉。但想想以后遇到各种问题，就去百度去翻大神们的博客，每次场景问题解决方法有些小小的区别，自己获得始终都是获得感不足，显而易见，不是自己的东西。当然这是站在我这个菜鸟级别的阶段来谈的，大神就slide过吧。不多bb，搞得像是花里胡哨，哗众取宠，不是技术派一样，向着大神的心，前进。直接摆上今天主题。

问题描述：

布局离不开浮动流（脱离文档标准流），但同时会产生相应的问题，这会导致文档排版等或者不能达到自己预料的效果。

常见浮动产生的副作用及其影响：

1.背景不能显示（因为高度都为0了，background-color怎么铺开）
2.边框不能不能完全撑开
3.margin、padding它的css属性不能正确显示

实例，直接上图显示bug

简单场景需求：父元素包裹两个div，其中一个左浮动，另一个右浮动

希望产生效果如图：

但实际产生的图，是这样的：

实例代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>浮动产生的问题</title>
	<meta charset="utf-8"/>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		.parents{
			/*第一种方法 这是清除浮动方法的简单方法，设置父元素的宽高*/
			/*width: 600px;
			height: 200px;*/
			margin:20px auto;
			background-color: gray; /*test color*/
			/*border:10px solid red; */ /*test 浮动对边框的影响*/ 
			/*第二种方法，就是在父级标签设置overflow属性，其值为hidden；zoom属性其值为1；*/
			/*overflow: hidden;
			zoom:1;*/
		}
		.box1{
			width:250px;
			height: 200px;
			display: inline-block;
			float: left;
			font-size:0;/*清除浏览器默认的间距*/
			background-color: red;
		}
		.box2{
			width:250px;
			height: 200px;
			display: inline-block;
			margin-left: 50px;
			float: right;
			background-color: blue;
		}
		/*第三种方法是在父元素下添加一个块级标签，设置它的css属性：clear：both；*/
		/*p{
			clear:both;
		}*/
		/*第四种方法与第一种方法原理是一样的，只是采用伪元素选择器在父元素后添加块级标签并且设置clear属性的一种别样高大上的方式*/
		/*.parents::after{
			content: '';
			display: block;
			clear: both;
		}*/
	</style>
</head>
<body>
	<div class="parents">
		<div class="box1"></div>
		<div class="box2"></div>
		<!-- <p></p> -->
	</div>
</body>
</html>