为何我的第二个副作用和老师讲的不同啊？

来源：2-6 float浮动的原因以及副作用分析

qq_天天_66

2017-07-12 20:57:30

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<style type="text/css">
	div{
		width: 200px;
	}
	.one{
		float:left;
		background-color: red;
		height: 300px
	}
	.two{
		background-color: yellow;
		height: 200px;
	}
	.three{
		background-color: green;	
	}	
</style>
<body>
   <div class="three"> <div class="one"> </div></div>
    <div class="two"></div>
   
</body>
</html>

结果是父级的同级元素往上走来了，并且重叠了空间

写回答

1回答

highcker

2017-07-13

已采纳

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<style type="text/css">
    div{
        width: 200px;
    }
    .one{
        float:left;
        background-color: red;
        height: 300px
    }
    .two{
        background-color: yellow;
        height: 400px;
    }
    .three{
        width: 100%;
        background-color: green; 
        border: 1px solid #ccc;  
    }  
</style>
<body>
   <div class="three"> <div class="one"> </div></div>
    <div class="two"></div>
    
</body>
</html>

是会有重叠的，因为.one元素浮动后脱离文档流了，所以.three元素所占空间很小（你可以给.three元素设置边框看一下.three元素大小），这样.two元素排在.three元素之后，.one元素就把.two元素重叠了。但你的.one元素宽和.two元素宽一样，高比.two元素大，所以被完全重叠了...
我在你代码基础上把.two元素高度改成比.one元素高度大就能看到没重叠的部分了 O(∩_∩)O~

0 学习 · 36712 问题

查看课程

相似问题

第二个副作用问题

回答 2

第一个div设置float后的margin-top为何不以body为基准

回答 2

浮动的第二个负作用是什么？

回答 2

请问老师为什么

回答 3

请问老师为什么

回答 2

打开慕课网App查看更多内容