Home > Developer > Web Develop
How to format elements in a Web page in a browser
Standard flow: (document flow normal flow) default layout method vertical layout (block level) and horizontal layout (inline, in-line layout)
Floating flow: A floating box can move left and right until its outer edge encounters an edge that contains a box or another floating box. A floating box does not belong to a normal stream in the document, and when an element floats, it does not affect the layout of the block-level box but only the arrangement of the inline box (usually text), and the normal flow in the document behaves as if the float box is not present, and when the float box height exceeds the containing box, It will also appear that the inclusion box does not automatically stretch to close the floating element ("height collapse" phenomenon). As the name implies, is floating on the ordinary stream, like a cloud, but only left and right floating.
Floating element: Off the standard flow, the element as long as floating out of the standard flow, the remaining elements in the standard flow (the first element floats the second element is not floating will take up the position of the first element, The second element because floating before the position of the first element is floating or looking for the first line but the first line is accounted for, so it will follow the first element, the specific write a piece of code to run a look at it, off the label is the same as not floating flow inside the same, the front of the element off the back of the mark, the front will cover
Floating rule: The first floating in the same direction is displayed in front, the elements in different directions will be left floating, and the right float will find the right float.
The floating element floats after the content is determined by the floating element before the standard flow position (the floating element does not overwrite the floating element)
Floating element sticking phenomenon: according to the order of floating snapping, if the last element is wider than the width of the parent element, then the element is pasted to the third-lowest element of the paste, if you have to continue to find the previous element paste, until the parent element can not be fully displayed, there is no way to paste
The self-enclosing phenomenon of floating elements: floating elements cover elements that do not float, but do not overwrite content without floating elements;
(self-surrounding phenomenon is generally used for graphic mixed!!!) ）
The height of the content in the standard stream is propped up by the height of the parent element and cannot be propped up in a floating stream
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>How Web pages are laid out</title> <style>. Box1{float: Left;width:100px;Height:100px;Background-color:Red; }. Box2{width:150px;Height:150px;Background-color:Yellow; }. Box3{float: Left;width:200px;Height:200px;Background-color:Blue; }. Box4{width:250px;Height:250px;Background-color:Green; } </style></Head><Body><Divclass= "Box1">1</Div><Divclass= "Box2">2</Div><Divclass= "Box3">3</Div><Divclass= "Box4">4</Div></Body></HTML>
How Web pages are laid out
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
