Notes on floating

Source: Internet
Author: User

Label

About floating:

From a macro perspective, there is a fundamental difference between our web pages and design software such as PhotoShop: The production of web pages is a "stream" and must be top-down, like a "knit sweater ". Design software can be painted wherever you want.  

Differences between intra-row elements and block-level elements:(Very important)

Line element:

  • Side by side with other row elements;
  • Width and height cannot be set. The default width is the text width.

Block-level elements:

  • Occupies a row and cannot be tied with any other element;
  • Acceptable width and height. If no width is set, the width is changed to 100% of the parent by default.
Block-level elements can be converted into intra-row elements:

Once you set a block-level element (such as Div:

display: inline;

The element in the row is converted into a block-level element:

In the same way, once a Row Element (such as span) is set:

display: block;

Then, the label will immediately become a block-level element, which is no different from a div. Block refers to block. That is to say:

  • In this case, the width and height of the span can be set.
  • At this time, this span must occupy a line, and others cannot join him.
  • If the width is not set, it will be full of the father
How to float elements:

The horizontal movement of elements means that the elements can only move left and right, but cannot move up or down.

A floating element moves left or right as much as possible until its outer edge hits the border of the contained box or another floating box.

The element after the floating element will surround it.

Elements before floating elements are not affected.

If the image is right floating, the following text stream will surround it on the left:

Instance: IMG {float: Right ;}

Suggestions for beginners:

At the beginning, we must follow the following principle:It will never be a single thing floating, it will always be a floating thing, it will be a floating thing, everyone will be floating.

 

Several Methods to clear floating:

1. Add an empty DIV in the last child element to set clear: Both

2. Add a pseudo-class element: After {

clear:both;  content:"";  display:block;

}

Instance:. clearfloat: After {display: block; clear: Both; content: ""; visibility: hidden; Height: 0}

3. Set a reasonable height for the parent element.

4. Add overflow: hidden to the parent element (it is not recommended to hide the overflow part ).

Supplement:

A span tag can be set to the width and height without being converted to a block-level element. So one thing that can be proved is that all labels are no longer in-row or block. That is to say,Once an element floats, it will be able to side by side and set the width and height. Whether it is a div or a span.









Notes on floating

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.