Shulou(Shulou.com)06/01 Report--

This article mainly introduces "what is CSS floating layout and document flow". In daily operation, I believe many people have doubts about what CSS floating layout and document flow are. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "CSS floating layout and document flow". Next, please follow the editor to study!

Introduction to document flow

What is meant by "document stream"? Simply put, it refers to the order in which elements appear on the page. It can be divided into "normal document stream" and "detach from document stream".

1. Normal document stream

Normal document stream, also known as "normal document stream" or "normal document stream", is what the W3C standard calls "normal flow". The simple definition of a normal document flow is: "A normal document flow that divides a page into one line from top to bottom, where block elements occupy a single line, and adjacent intra-line elements are arranged from left to right in each line until the line is full." That is, a normal document flow refers to the layout of page elements by default.

For example, p, p, and hr are all block elements, so they have a single line. Span, I, and img are all inline elements, so if two inline elements are adjacent, they will be on the same line and arranged from left to right.

2. Break away from the document stream

To break away from a document stream means to break away from a normal document stream. If you want to change the normal document stream, you can use two methods: floating and positioning.

Normal document flow effect:

Normal document stream / * define parent element style * / .document {width: 300px; background-color: # 0c6a9d; border: 1px solid silver;} / * define child element style * / .roomp {padding: 10px; margin: 15px; border: 2px dashed rebeccapurple Background-color: # fcd568;}

Box1

Box2

Box3

Set the effect after floating:

When we set the left float for the second and third p elements: in the case of a normal document stream, p is a block element and occupies a single line. However, because the float is set, the second and third p elements are side by side and run outside the parent element, which is different from the normal document flow. That is, setting the float takes the element out of the normal document flow.

Set the effect after positioning:

When we set the absolute positioning for the third p element: because the positioning is set, the third p element runs above the parent element. That is, positioning is set so that the element is detached from the document stream.

Float

In the traditional printing layout, the text can surround the picture according to the actual needs, which is generally called "text wrapping". In front-end development, using floating page elements is actually like a picture surrounded by text in a printed layout. This analogy is easy to understand. Floating is the best tool for CSS layout. We can flexibly locate page elements through floating to achieve the purpose of laying out web pages. For example, we can float the element left or right by setting the float attribute so that the surrounding element or text surrounds the element.

There are only two or two values for the float attribute:

We use the above example again:

Normal document stream / * define parent element style * / .document {width: 300px; background-color: # 0c6a9d; border: 1px solid silver;} / * define child element style * / .roomp {padding: 10px; margin: 15px; border: 2px dashed rebeccapurple Background-color: # fcd568;}

Box1

Box2

Next, we add left floats for box1 and right floats for box2:

.son1 {float: left;} .son2 {float: right;}

As can be seen from the above example, floats can affect the surrounding elements and cause a lot of unexpected problems. In CSS, we can use the clear attribute to clear the impact of floats.

The values of the clear attribute are as follows:

In actual development, we rarely use "clear:left;" or "clear:right;" to clear left or right floats alone, and often simply use "clear:both;" to clear all floats. Based on the above example, we clear the float:

Clear floating / * define parent element style * / .parent {width: 300px; background-color: # 0c6a9d; border: 1px solid silver;} / * define child element style * / .roomp {padding: 10px; margin: 15px; border: 2px dashed rebeccapurple Background-color: # fcd568;} .son1 {float: left;} .son2 {float: right;} .son3 {clear: both; display: block;} box1

Box2

We usually add an empty element after the floating element, and then define a clear:both; for that empty element to clear the float. In actual development, if you find something wrong after using floats, first check to see if the floats have been cleared. In fact, clearing floats is not just about clear:both;, but also overflow:hidden, as well as the more commonly used pseudo elements.

At this point, the study of "what is the floating layout of CSS and the flow of documents" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.