What to do if DIVs overlap each other in HTML-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

What to do if DIVs overlap each other in HTML

php中世界最好的语言

Nov 23, 2017 pm 06:12 PM

div html

We often find a problem when making web pages, that is, DIV covers DIV, so there is a problem of overlapping DIV boxes and causing the content to not appear. So today we will introduce to you the reasons and reasons. Solution.

Maybe you have encountered a layout with a top-down structure. The content of the lower DIV overlaps the content of the upper DIV. It is also possible that the lower content covers the upper DIV layout, forming a phenomenon of overlapping DIV and DIV coverage. You may also encounter I have seen overlapping coverage of two adjacent DIV boxes. What is the problem and how to solve it?

Next, we will use a case to demonstrate the overlapping phenomenon of these two compatible DIV coverages, and explain the reasons and solutions.

Top and bottom structure DIV box coverage First, use the example HTML code

<!DOCTYPE html> 
<html> 
<head> 
<title>DIV与DIV覆盖</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style> 
.boxa,.boxb{ margin:0 auto; width:400px;} 
.boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00} 
.boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00} 
.boxb{ border:1px solid #000; height:40px; background:#999} 
</style> 
</head> 
<body> 
<div class="boxa"> 
<div class="boxa-l">内容左</div> 
<div class="boxa-r">内容右</div> 
</div> 
<div class="boxb">boxb盒子里的内容</div> 
</body> 
</html>

Copy after login

You can copy the code and discover the DIV coverage phenomenon yourself.

Example code description:

Set two large div boxes with CSS names ".boxa" and ".boxb", set the width to the same 400px, and set one for ".boxb" A black border with a height of 40px and a black background; then add two small boxes in boxa, one on the left and one on the right. The CSS names are ".boxa-l" and ".boxa-r", and they are set to red at the same time. The border and css height are 80px, and the width is 280px and 100px respectively.

Problem Analysis

Generally, it is necessary to layout ".boxa" and ".boxb" in a top-down structure. From the above picture, we find that the effect seen in the browser is that the contents of the two boxes are The top-bottom structure effect is achieved, but the DIV ".boxb" goes under ".boxa", but the content is not overwritten, only the DIV is overwritten.

This reason is because the child in the first big box uses floating floatattribute and floats, so ".boxa" is not opened, and the same level The ".boxb" box is closely connected to ".boxa", but ".boxa" has no height. The floating children of ".boxa" are not at the same level as ".boxb". The ".boxb" box still considers ".boxa" There is no height, so the ".boxb" DIV box runs under the ".boxa" sub-level DIV box, forming an overlapping phenomenon.

Solution to the problem

Eitherclear the float, or set the height of ".boxa". Generally, you cannot set a fixed height if the text content is uncertain, so generally The height of ".boxa" cannot be set (of course you can determine how high the content is. In this case, ".boxa" can set a height to solve the coverage problem.).

Here we use the CSS clear float method to solve the problem of overlapping DIVs in the upper and lower structures. There are two ways to clear float. The methods are as follows.

css clear clear float

Add clear style to clear float before closing the ".boxa" box

Complete HTML source code:

<!DOCTYPE html> 
<html> 
<head> 
<title>DIV与DIV覆盖</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style> 
.boxa,.boxb{ margin:0 auto; width:400px;} 
.boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00} 
.boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00} 
.boxb{ border:1px solid #000; height:40px; background:#999} 
.clear{ clear:both} 
</style> 
</head> 
<body> 
<div class="boxa"> 
<div class="boxa-l">内容左</div> 
<div class="boxa-r">内容右</div> 
<div class="clear"></div> 
</div> 
<div class="boxb">boxb盒子里的内容</div> 
</body> 
</html>

Copy after login

This method is simpler and simpler than the previous method. Just add overflow to ".boxa" (parent box with floating children) :hidden)

CSS DIV example code is as follows:

<!DOCTYPE html> 
<html> 
<head> 
<title>DIV与DIV覆盖</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style> 
.boxa{ overflow:hidden} 
.boxa,.boxb{ margin:0 auto; width:400px;} 
.boxa-l{ float:left; width:280px; height:80px; border:1px solid #F00} 
.boxa-r{ float:right; width:100px; height:80px; border:1px solid #F00} 
.boxb{ border:1px solid #000; height:40px; background:#999} 
</style> 
</head> 
<body> 
<div class="boxa"> 
<div class="boxa-l">内容左</div> 
<div class="boxa-r">内容右</div> 
</div> 
<div class="boxb">boxb盒子里的内容</div> 
</body> 
</html>

Copy after login

This solves the problem of DIV coverage for everyone. For more exciting content, please pay attention to other related articles on the php Chinese website!