Float: right in CSS

Float elements in CSS are floating elements. The positioning of floating elements is based on the normal Document Stream. Then, the floating elements are extracted from the document stream and moved to the left or right as far as possible, here we will share with you how to solve the line feed problem on the right after the float: right attribute in CSS.

Solve the Problem of line feed on the right after float: right attribute in CSS.

◆ Problem

This problem does not occur in Chrome or Firefox, but it will appear in IE, with another line starting from the date.

◆ Cause Analysis

When the non-float element and the float element are together, if the non-float element comes first, the float element will be excluded, that is, your span is float: right, but your text is still float: none.

There are two methods to make the two rows the same.

Display span before text, that is:

<Div style= "Width: 300px; margin-top: 8px ;"><Span style= "Float: right ;">2010</Span>Concise and modern</Div>

Or set the text to float:

<Div style= "Width: 300px; margin-top: 8px ;"><Span style= "Float: left ;">Concise and modern</Span><Span style= "Float: right ;">2010</Span><Span style= "Clear: both ;"> </Span> </div>

Some floating knowledge

"The positioning of floating elements is still based on the normal Document Stream, and then extract from the document stream and move as far as possible to the left or right side. The text content is surrounded by floating elements. When an element is extracted from a normal Document Stream, other elements in the Document Stream ignore this element and fill in its original space. "

"The elements are automatically converted into block-level elements after they are floating. This element can be moved to the left or right of the current row. The attributes are as follows: float: left, float: rightorfloat: none ".

"You should set the width attribute for all floating elements (unless it is an element because it has an implicit width ). If the width is not set, the result is unpredictable. "

"For example, the floating element should define the width attribute, whether explicitly specified or implicitly. In addition, it fills container elements horizontally as much as possible, just like non-floating content, without leaving other content spaces around them. Second, unlike the elements in a normal Document Stream, the vertical margin (margin) of floating elements is not superimposed. Finally, floating elements can overlap block-level elements in a normal document stream, but the concept of floating .). "

// If you want to publish this article, please indicate the exit, no outgoing copyright notice, I do not like to see this kind of website. My work website does not indicate the person who is serving Seven {See7di # Gmail.com}

◆ "One of the first things we should keep in mind is that the floating element can only float to the left or right side, but does not float to the center. This is an easy mistake for new users. Remember, the most basic rule is that floating elements can only float to both sides. "

"When we let an element float, it will float to the right or left until it encounters the container edge. If we move another element in the same direction, it will float until it hits the edge of the previous floating element. If we float more elements, they will arrange one by one, but the space will soon be insufficient. When this row cannot accommodate more floating elements, the next floating element will continue to be arranged with line breaks. "

Containingblocksorcontainingboxes: "A container element is a row-level or block-level element that contains other sub-elements .... "

"When it is clearly specified, the vertical position of the floating element is determined by its original position in the Document Stream, And it is directed at the top of the current row. But horizontally, it moves as far as possible to the edge of the container element, but still follows the padding distance of the container element ). Elements in the same row are arranged around floating elements. "

◆ "Because floating elements do not occupy the normal Document Stream space, block-level elements that are not explicitly specified before and after floating elements occupy the position where the floating elements are supposed to be, it's like it never exists. The rows after the floating element narrow down the width according to the floating element. Elements before floating elements are arranged again, occupying an independent row. Internet Explorer and ff have different performance in this case )"

"If the horizontal direction of the current row does not have enough space to accommodate floating elements, the row goes down until there are rows that can accommodate this element. "

"Any floating element cannot exceed the upper boundary of the original location of the document. The top of the floating element must be aligned with the top of the current row (or alignment with the bottom edge of the previous block-level element when there is no current row element ). "

"To really understand the floating theory, you must understand what linebox is in CSS ). Unfortunately, to explain what a row is, you must first understand what a row-level element is. Row-level elements refer to non-block-level elements. For example, <em> while a row is a logical concept, it is a virtual rectangle that contains all row-level elements that make up the row, the height is at least the highest of these row-level elements. "

"If we add float: left to all the columns in the Div, they will be arranged to the left. If we want to have a footer at the bottom of the page, we don't need the longest column, just add clear: both is enough"

"There is a potential disadvantage when you use a layout method such as floating elements, that is, whether your page can be consistently displayed depends on whether the browser is consistent. Especially when floating elements are part of a more complex layout, they will become more vulnerable. "

About floating clear

"The elements after the floating element automatically surround the floating element. If you do not want this, you can apply the 'clear' attribute to these elements. This property has four values: clear: left, clear: right, clear: bothorclear: none"

There are many tips to clear floating elements, but no additional silent labels are introduced. The following are three common practices: a) floating container elements together B) using overflow: hiddenc on container elements) using css pseudo classes such as after.

"Inserting a cleanup element is a standard practice for the container to correctly wrap all floating elements, which has the effect of dragging the edge at the bottom of the container to wrap the elements contained. "

"A common problem with floating design-based la s is that containers of floating elements do not automatically stretch to contain floating elements. If you want to add a border (for example, adding a border to the container element) to the outside of all floating elements, you must display the command browser to stretch the container. You can use the overflowmethod method. "

Use: after to imagine that we use: after to insert a dot and set its property {clear: both ;}. This is all you need to do, but no one will accept that there is a gap at the bottom of the container, so we also need to set {height: 0 ;}and {visibility: hidden ;} to ensure tight seams.