CSS Learning notes-floating (float,clear)

Float

The Float property defines the direction in which the element floats. Historically, this property has always been applied to images, so that text surrounds the image, but in CSS, any element can float. a floating element generates a block-level box , regardless of its own element. If floating non-replacement elements, specify a definite width; otherwise, they will be as narrow as possible.Note: If there is only a small amount of space above a row for floating elements, then this element jumps to the next line, which continues until a row has enough space. Property Value:The left element floats to the left. The right element floats to starboard. None default value. the element does not float and appears in its position in the text. inherit specifies that the value of the float property should be inherited from the parent element. when the same row element uses Float:right, the left element floats first to the right, such as:No floating float:rightwhen an element is a block-level element and another element floats, the floating element will still wrap:when there are two elements floating, an element does not float. If the element that does not float is a block-level element, the floating element is ignored for layout.when set to an inline element, the element surrounds the floating element in an empty space.if the version before IE 8, whether block-level elements or inline elements are as follows:will not ignore the float. If there are multiple floating elements of varying lengths and the container is not wide enough:The remaining space in the first row is not sufficient to meet the width of the yellow box, so the yellow box moves down. Interestingly, the yellow box is not under the gray, but under the Rose red box, because the Rose red box height is less than gray.  In summary , when the element is set to float, the individual feels that the element is similar to owning the Display:inline-block attribute. You can set the margin, width, height as a block-level element, and you can make text, inline elements immediately follow it without wrapping. refer to: http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.htmlFloating can also cause container elements to collapse highly (in case the container does not set height): 1. When there are only floating elements in the container, the container collapses:It is strange that IE7 will not collapse:and when I removed the width, it collapsed again:2. If the float of the DIV3 is removed, then:The container is open, and the block-level elements are superimposed (as mentioned above). 3. If Div3 is changed to Display:inlinedoes this mean that when calculating the height of a container element, the floating element is the equivalent of being out of the document stream (but not really detached, because the inline element can wrap around it). Of course, I did not test IE6 7 here. Clearthe Clear property specifies which side of the element does not allow other floating elements. DescriptionThe clear property defines the side on which the element is not allowed to appear floating elements. In CSS1 and CSS2, this is achieved by automatically increasing the upper margin for the purge element (that is, the element that has the clear attribute set). In CSS2.1, the clearance space is increased above the outer margin of the element, and the margin itself does not change. Either way, the end result is the same, and if the declaration is left or right cleared, the element's Sisu border boundary is just below the margin of the floating element on that edge. Property Value:left does not allow floating elements on the side. right does not allow floating elements on the left side. the both does not allow floating elements on both sides of the left side. None default value. allows floating elements to appear on both sides. inherit specifies that the value of the clear property should be inherited from the parent element.  for CSS Clear floating (clear), be sure to keep in mind that this rule only affects the elements that use the purge itself, and cannot affect other elements. Reference:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html Clear floating parts How do you understand it? Take the following example, we want to let div2 move, but we are using the DIV1 element of the CSS style to clear the float, trying to remove the div1 to the right of the floating element (clear:right;) to force the Div2 down, which is not feasible, Because this clear float is called in Div1, it can only affect div1 and cannot affect div2. For Div2 to move down, you must use the float in the div2 CSS style. In this example, the left side of Div2 has a floating element div1, so as long as the clear:left is used in the Div2 CSS style, to specify that the DIV2 element is not allowed floating elements to the left, so Div2 is forced to move down one line. So if there are only two elements in the page DIV1, Div2, are they all floating right? Readers should now be able to speculate on their own scenarios, as follows:now, if you want to move div2 down to Div1, how do you do it?  also based on the side-dish conclusion, we want to move the DIV2, we must call the float in the div2 CSS style, because the float only affects the element that invokes it.  you can see that there is a floating element on the right side of the Div2 Div1, then we can use Clear:right in the Div2 CSS style, to specify that the right side of DIV2 does not allow floating elements, so div2 is forced to move down one line to the bottom of div1. These are the effects of using the clear property when two objects are floating at the same time. If the Div1 floats, Div2 does not float, what happens? By default: It is strange that the div2 drift is covered by DIV1, but the contents of it are below div1. After using Clear:left or both: when Div2 set Display:inline, by default: When Div2 or clear:left is used for both, there is no change, as in the case.

CSS Learning notes-floating (float,clear)