在学习float知识的过程中,大家都知道float会脱离正常的文档流的问题,如下有两个div,div1和div2,如果对div1设置左浮动,div1会脱离正常的文档流进行悬浮,div2的框会顺着正常的文档流上移,由此就会觉得div1会将div2遮挡住,但是最终的显示结果是
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>text</title>
<style>
#div1{
width: 200px;
height: 100px;
background-color: red;
float: left;
}
#div2{
width: 100px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">
大家好我是div1
</div>
<div id="div2">
大家好我是div2
</div>
</body>
</html>
这个是最终的显示结果,我在学习之前也认为应该的结果是div2里面的文文字会悬浮在div1之上,但是最终结果是div1的框会悬浮在div2之上,对div2进行一定程度的遮挡,但是div2里面的内容对对整个div框进行绕流,这个一定要记住。当然如果是需要有内容遮挡需求的话,那就需要用到定位来实现了,而不是浮动。