CSS -- float attribute memo notes

By specifying the float value of the CSS attribute, the elements float left or right, and then move up by the successor element to fill the space available when the previous element floats. The float attribute of CSS is used to change the default display mode of block element objects. After the float attribute is set for an HTML tag, it no longer occupies one row, this allows multiple elements to work in the same row. Float is very powerful, but it may become a nightmare for you to debug the style if you do not have a good grasp of it. If Float is used, if Float is not cleared, the parent element container with floating elements cannot be automatically opened. If the internal floating point is not cleared, the floating parent element cannot automatically expand to its own height. That is to say, when an element is floating, if it is not closed, its parent element does not include this floating element, because the floating element is detached from the document stream. So you need to clear the floating behind the style definition. There are several methods to clear the floating: 1. clear: both clear floating mainly uses the Clear attribute to clear floating. This is an old method to clear floating, however, this problem is usually solved by clearing the floating point. To use clear: both to clear floating, we need to add an additional element next to the place where the floating is to be cleared, such as a div tag, and define their style as "clear: both ", the structure is as follows:

<div class="demo A">      <div class="demoB demoFloat">float left</div>      <div class="demoC demoFloat">float right</div>      <div class="demoD demoFloat">not float</div>      <div class="clear"></div>  </div>  

 

 

<Pre name = "code" class = "css">. clear {clear: both;/* mainly uses this attribute to clear floating * // * to prevent ie from having a certain amount of space, I suggest you add the following three attributes */height: 0; line-height: 0; font-size: 0 ;} </pre> <p> </p> <pre> </pre> <p> </p>