Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to solve DIV overlap". The editor shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "how to solve DIV overlap" can help you solve the problem.

First, the upper and lower structure DIV box cover

1. First, the HTML code of the website DIV CSS instance

DIVCSS5 instances DIV and DIV cover .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} content left content right boxb box content

You can copy the code to find the DIV coverage phenomenon yourself.

Example code description:

Set two large div boxes named ".boxa" and ".boxb" respectively, set the same width to 400px, set a black border and height to 40px for ".boxb", and a black background for ".boxb"; then add two small boxes named ".boxa-l" and ".boxa-r" for CSS to the left and right to boxa, while setting the red border, css height to 80px, width to 280px and 100px respectively.

2. Screenshot of the effect of an example

The code is in the DW software, and the effect browser screenshot

3. Problem analysis.

Generally think that the layout of ".boxa" and ".boxb" is the upper and lower structure. From the above picture, we can see that the effect in the browser is that the content in the two boxes is to achieve the upper and lower structure effect, but the ".boxb" DIV goes under the ".boxa", but the content is not covered, only the DIV is overwritten.

This is because the children in the first big box use the floating float attribute and float, so that ".boxa" is not opened, while the ".boxa" box of the same level is close to ".boxa", while the height of ".boxa" is not high, and the children of ".boxa" are not at the same level as ".boxb". The ".boxa" box still thinks that ".boxa" has no height. As a result, the ".boxb" DIV box runs under the ".boxa" child DIV box to form an overlay.

4. Solution to the problem

Either clear the float or set the ".boxa" height. In general, if the text content is uncertain, you cannot set a fixed height, so you generally cannot set the ".boxa" height (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 CSS to clear the floating method to solve the problem of overlapping coverage of the upper and lower structure DIV. There are two ways to clear the float as follows.

4-1:css clear clear float

Add the clear style to clear the float before the ".boxa" box is closed.

Complete HTML source code:

DIVCSS5 instances DIV and DIV cover .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} content left content right boxb box content

Case screenshot

Clear floats using the clear style

Related CSS tutorial articles:

Css clear clear float

4-2:css overflow clear float

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

The CSS DIV instance code is as follows:

DIVCSS5 instances DIV and DIV override .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} content left content right boxb box content

Screenshot of DIV+CSS case effect

2. Overlapping coverage of two adjacent DIV

This kind of novice has this kind of problem more often, generally due to the fact that one of the two adjacent DIV uses a float and the other does not use a float, so the two DIV overlays overlap.

1. Complete CSS+DIV code if there is a problem

DIVCSS5 instances DIV and DIV override .aa {float:left; border:1px solid # 333; background:#FFF;height:50px;} .BB {border:1px solid # F00 political backgroundcharger CCC; height:80px} I am the content in aa and I am the content in BB

Introduction code: set two boxes using class named ".aa" and ".bb" respectively, a setting float:left, a setting without setting, a setting background of white, a setting background color of gray, a height setting of 50px, a setting height of 80px, a frame of black, a border of red.

2. Screenshot of case effect

Screenshots of cases covered by DIV and DIV

3. Problem analysis.

From the above figure or browser test case, we can see that the ".aa" corresponding DIV box floats on top of the ".bb" corresponding DIV box, but the content is not covered. This is because the ".aa" corresponding DIV box uses a float, while the peer ".bb" corresponding DIV box does not use a float. One uses a float and one does not cause the DIV to be not on the same "plane", but the content will not be overwritten. Only DIV forms the covering phenomenon.

4. Solution

Either none of them use floats, or all use float floats, or set the margin style for DIV that does not use float floats.

For example, here the ".aa" corresponding box will have a fixed width of 300px; this uses the ".bb" corresponding box to set margin-left:302px (greater than 300, the value required for your own test settings) to achieve non-overlapping coverage.

This is the end of the content about "how to solve the overlap of DIV". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.