Solving the problem that CSS in DIV cannot display the background color

黄舟
Release: 2017-07-19 10:42:39
Original
2654 people have browsed it

DIV CSS cannot display the background color problem analysis and solution DIVCSS5 experience tutorial

div css novice layout will encounter the background color of the layout cannot be displayed, the general layout background cannot be displayed, the usual reasons are as follows:

1. The css background color cannot be displayed due to floating caused by the use of float
2. The background cannot be displayed due to insufficient height

Next, we will introduce the reasons and solutions for the inability to display the background color or image.

1. CSS float creates a float that cannot display the background style color - TOP

Assume that the background color style is set for an object, and the internal box of the object has a float attribute style. At this time, The object floats, causing the object to not be opened, so the css background color cannot be displayed. There are three solutions. One is to set clear to clear the float, set the css height, and set the css overflow style.

Detailed tutorial can be entered: css clear float

2. The height limit causes the background color to not be displayed completely - TOP

Cause analysis:
If you have an object The height is not calculated (or a very small height attribute style is accidentally set), because it is not certain how much content there is. When the content exceeds the height limit you set, the part of the background that exceeds the height limit may not be displayed.

Solution:
Set a high enough height, or cancel the deletion of the height style.

If you want to limit the height, but don’t want too much content to overflow, you can set the height limit. Solution tutorial:
css hides content that overflows beyond the DIV border

The above is the detailed content of Solving the problem that CSS in DIV cannot display the background color. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template