On CSS Floating Property

Source: Internet
Author: User

To introduce the float float property of CSS, you must first look at the standard document flow

Standard document Flow:

In the absence of CSS intervention, block-level elements of a single row, you can set the width of the height, the elements of the row side, the width of high auto-fill.

The standard document flow for HTML pages (the default layout) is: From top to bottom, from left to right, with blocks (block-level elements) wrapped.

Float Float Property The first use is to enable the target content to be wrapped in the text that is often seen in the newspaper, and later mostly used to achieve the content of the horizontal side-by-side arrangement,

Floating layer: After assigning a value to the float property of an element, it is out of the document flow, floating around the left and right border of the parent element (the default is the body text area).

The properties of float are described in:

Left: the element floats to the left.

Right: the element floats to the left.

Characteristics of float:

"1" child floats cause parent height collapse, workaround: 1. Add a height of 2 to the parent again. Use Overflow:hidden

"2" Floating package Sex:

block-level elements: parcel to the content area, no longer a full line, but also the length, length and content of the same length, and the body is still block-level elements;

Inline elements: Setting a float changes the display property to make it a block-level element and can be set to a wide height.

"3" element floats do not pass through the padding area

A "4" float causes elements to be left out of the document flow affecting other elements.

On CSS Floating Property

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.