Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "css element floating matters need to pay attention to", the content is detailed, the steps are clear, the details are handled properly, I hope this "css element floating matters need to pay attention to what" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

Note: 1, the left outer boundary of the floating element can not exceed the left inner boundary of its containing block, and the right outer boundary is the same; 2, the top of a floating element cannot be higher than the inner top of its parent element; 3, the top of the floating element cannot be higher than the top of the previous floating element or block element; 4, the left floating element must be as far to the left as possible, and the right floating element must be as far to the right as possible.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Floats in css:

In css, to move the element to the left or right of the parent element, we can set a floating float for the element.

Float:left/right

There are two options for floating, one is the float:left left float. There is also a float:right right float.

If you set a float on an element, the element will deviate from the standard document stream, and the element after the element will occupy the original position of the element, and the content behind the element will be extruded.

The floating element has no width and height, and the height of the parent element of the element also shows a high collapse, and the width and height of the floating element vary dynamically according to the internal content of the element. To reset the height of its parent element.

If you set the left float on some elements, the elements will be displayed in the same row, but if the width and sum of these elements are larger than the parent element, the excess (including that element) will be displayed on the next line.

Rules to follow for floating elements (pay attention)

The left outer boundary of a floating element cannot exceed the left inner boundary of its containing block, and neither can the right

The left outer boundary of the floating element must be the right outer boundary of the previous left floating element in the source file, unless the top of the later floating element is below the bottom of the first floating element.

The right outer boundary of the left floating element does not appear on the right side of the left outer boundary of the right floating element.

The top of a floating element cannot be higher than the inner top of its parent element.

The top of a floating element cannot be higher than the top of all previous floating or block-level elements

If another element appears before a floating element in the source document, the top of the floating element cannot be higher than the top of any row box that contains the box generated by that element.

A floating element cannot exceed the boundary of its containing element. The left (or right) floating element has another floating element on the left (or right) side, and the right outer boundary of the former cannot be on the right (or left) edge of the right (or left) boundary of its containing block. If there is not enough space, the floating element will be squeezed into a new "line"

Floating elements must be placed as high as possible. That is, under the premise of meeting other constraints, float as high as possible.

The left floating element must go as far as possible to the left, and the right floating element must go as far as possible to the right.

Floating collation

Floating elements in the same direction are first displayed in front of the float. Because the float will only cover the standard flow.

Floating elements in different directions, floating on the left, floating on the right, floating on the right.

The position of the floating element after floating is determined by the position of the floating element in the standard stream before floating.

Attachment phenomenon: if the last floating element exceeds the width of the parent element, it will automatically find the last element and paste it. If the width is still not enough, continue to find one. If the width of the parent element is not enough, you will have to make do with it.

Mixed arrangement of picture and text

Clear float

Set the height to the previous parent element (it is best not to set the height in development, so this convenience is not recommended)

Set the clear attribute to the following element, (note that the margin attribute becomes invalid after adding the clear attribute)

Exterior wall method

Add a block-level element in the middle and set clear: both (Note: margin-top can be used in the second box, but margin-bottom cannot be used in the first box, so generally neither the margin-bottom of the first box nor the margin-top of the second box is set, but the height of the extra block-level elements is set directly)

Interior wall method

Block-level elements are written to the end of the first box and set clear: both (Note: the first box can use margin-bottom, and the second box can also use margin-top. Additional block-level elements can also be set in height)

Difference: the inner wall method can support the height of the first box, while the outer wall method cannot. (the modified method is also not recommended because additional elements have been added.)

Use pseudo elements (recommended)

.box1:: after {content:'; display: block; height: 0; visibility: hidden; clear: both;} .box1 {* zoom: 1; / / compatible IE6}

Box1 {* zoom: 1; / compatible IE6} here, this article "what should be paid attention to when css elements float" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.