What problems does css floating cause?

The impact of css floating: 1. Since the floating element is out of the document flow, the height of the parent element cannot be expanded, which affects elements at the same level as the parent element; if the height is not set for the parent element , then the parent element will not be displayed on the display. 2. The floating element no longer occupies the position of the original document flow, and it will affect the layout of subsequent elements.

The operating environment of this article: windows7 system, css3 version, Dell G3 computer.

Recommended: css video tutorial

We need to know: the floating box can move left and right until it encounters another floating box or the containing box on its outer edge . The floating box does not belong to the ordinary flow in the document flow. When the element is floated, it will not affect the layout of block-level elements, but will only affect the layout of inline elements.

At this time, the normal flow in the document flow will show that the floating box does not have the same layout mode. When the height of the containing box is smaller than the floating box, "Height Collapse" will appear.

When the parent element does not set a height, if the child element in the parent element is set to float, the height of the parent element will not be automatically expanded. There is no height value.

Obviously there are some problems after setting the float in this way, such as:

• The margin of the parent element is affected and cannot be centered up, down, left, and right,

• If the height of the parent element is not set and the height of the parent element is not expanded after floating, the parent element will not be displayed on the display.

Summary: Consequences caused by floating

(1) Because the floating element is out of the document flow, the height of the parent element cannot be expanded. , affecting elements at the same level as the parent element; if the height is not set for the parent element, the parent element will not be displayed on the display.

(2) Non-floating elements at the same level as the floating element will follow it, because the floating element leaves the document flow and does not occupy its original position

(3) If the floating element is not the first If there is a floating element, the element before the element also needs to be floating, otherwise it will easily affect the structural display of the page

Since the floating element no longer occupies the position of the original document flow, it will have an impact on the layout of subsequent elements. In order to solve these problems, you need to clear the float in the element at this time.

How to clear floating? Clear floating process

1. First set the css height of the parent to clear it. Generally, we set a height for the height, set the content height to 100px, and the upper and lower boxes to 2px, so that Here, the overall height of the parent is 102px. We use the height style, but first we need to calculate the height of the content.

2. Use the clear:both attribute to clear the float. We can put a class="clear style in the div to clear the float.

3. Do the parent div To define attributes, we define an overflow:hidden style for the parent css selector to clear the float generated by the parent.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of What problems does css floating cause?. For more information, please follow other related articles on the PHP Chinese website!