Clear floating_html/css_WEB-ITnose in css

(1) Use empty labels to clear floats

This is currently the most commonly used method of clearing floats. The empty tag can be a div tag or a P tag. In fact, in theory it can be any label. This method is to add an empty tag to clear the float at the end of the parent element that needs to be cleared. Its CSS code is: clear:both. This method is simple, clear, convenient and practical, but its disadvantage is also obvious, that is, it adds meaningless structural elements. In addition, there is a similar method,
, which can also achieve the same effect.

(2) Use the after pseudo-object to clear floats

Each browser supports the after pseudo-object, so after should be applicable and there is no compatibility issue. Its CSS code: #layout:after{ display:block; clear:both; content:""; visibility:hidden; height:0;}. Please note when using: 1. This method must set height:0 for the pseudo object that needs to clear the floating element, otherwise the element will be several pixels higher than the actual one; 2. content The attribute is required, but its value can be empty. This method is practical and effective without adding meaningless tags, but the CSS code is more complex and not concise and clear enough.

(3) Use the overflow attribute

This method effectively solves the disadvantage of having to add unintentional code by clearing floats through empty label elements. To use this method, you only need to define the CSS attribute in the element that needs to be cleared of float: overflow:auto; The purpose is to make the height adaptive, zoom:1; is for compatibility with IE6 ( zoom does not comply with W3C standards), it can also be solved by using height:1%;.