1. Floating
1.1 three ways of traditional web page layout
The essence of web layout - using CSS to place boxes. Put the box in place
CSS provides three traditional layout methods (in short, how to arrange the boxes):
- Normal flow (standard flow)
- float
- location
1.2 standard stream (normal stream / document stream)
-
Block level elements will occupy one row and sweep M from top to bottom.
- Common elements: div, hr, p, hl~h6, ul, o1, dl, form, table
-
The elements in the row will be arranged in order from left to right. If they touch the edge of the parent element, they will wrap automatically.
- Common elements: span, a, i, em, etc
The above are all standard flow layouts. What we learned earlier is standard flow.
These three layout methods are used to place the box. When the box is placed in the right position, the layout is naturally completed.
Note: in the actual development, a page basically includes these three layout methods (the mobile terminal will learn new layout methods later).
1.3 why float?
Question: can we easily achieve the following effects with standard flow?
- How to arrange multiple block level boxes (div) horizontally in a row?
It's difficult. Although converting to inline block elements can realize one line display, there will be a large gap between them, which is difficult to control.
Question: can we easily achieve the following effects with standard flow?
-
How to realize the left-right alignment of two boxes?
Summary: there are many layout effects. There is no way to complete the standard flow. At this time, you can use floating to complete the layout. Because floating can change the element label
The default arrangement of checklists
The most typical application of Floating: multiple block level elements can be arranged and displayed in a row.
The first rule of web page layout: find the standard flow for the vertical arrangement of multiple block level elements, and find the floating for the horizontal arrangement of multiple block level elements.
1.4 what is floating?
The float attribute is used to create a floater and move it to one side until the left or right edge touches the edge that contains the block or another floater.
selector { float: Attribute value; }
1.5 floating characteristics (key and difficult points)
After adding floating elements, they will have many characteristics that we need to master
- Floating elements will break away from the standard flow (off standard)
- Floating elements are displayed in a row and aligned at the top of the element
- Floating elements have the properties of inline block elements
The most important characteristics of elements with float ing set:
- Break away from the control (floating) of standard ordinary flow and move to the specified position (moving) (commonly known as off standard)
- The original floating position of the box is no longer retained
If multiple boxes are set to float, they are displayed in a row of attribute values and aligned at the top.
Note: floating elements are close to each other (there will be no gap). If the parent width cannot hold these floating boxes, the extra boxes will be aligned in another line
Floating elements have inline block element properties.
Any element can float. No matter what the original pattern element is, it has similar characteristics to the inline block element after adding floating.
- If the width of the block level box is not set, the default width is the same as that of the parent, but its size depends on the content after adding floating
- There is no gap in the middle of the floating box, which is close to each other
- The same is true for inline elements
1.6 floating elements are often used with standard flow parents
In order to restrict the position of floating elements, our general strategy for web page layout is:
First arrange the upper and lower positions with the parent elements of the standard flow, and then float the inner child elements to the left and right positions Conform to the first standard side of web page layout
<style>
.box {
width: 1200px;
height: 460px;
background-color: pink;
margin: 0 auto;
}
.left {
width: 230px;
height: 460px;
background-color: purple;
float: left;
}
.right {
width: 970px;
height: 460px;
background-color: skyblue;
float: right;
}
</style>
<body>
<div class="box">
<div class="left">Left</div>
<div class="right">right</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 1226px;
height: 285px;
background-color: pink;
margin: 0 auto;
}
.box li {
width: 296px;
height: 285px;
background-color: purple;
float: left;
margin-right: 14px;
}
.box .last {
/* Pay attention to the weight problem */
margin-right: 0;
}
</style>
<body>
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li class="last">4</li>
</ul>
</body>
The second standard side of web page layout
First set the size of the box, and then set the position of the box
<style>
.box {
width: 1226px;
height: 614px;
background-color: pink;
margin: 0 auto;
}
.left {
width: 234px;
height: 614px;
background-color: purple;
float: left;
}
.right {
width: 992px;
height: 614px;
background-color: skyblue;
float: left;
}
.right>div {
width: 234px;
height: 300px;
background-color: pink;
float: left;
margin-left: 14px;
margin-bottom: 14px;
}
</style>
<body>
<div class="box">
<div class="left">Left</div>
<div class="right">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
</body>
2. Common web page layout
2.1 common web page layout
2.2 precautions for floating layout
- The float is matched with the parent box of the standard flow.
- First, the parent elements of the standard flow are used to arrange the upper and lower positions, and then the internal child elements are floating to arrange the left and right positions
- If one element floats, theoretically the other sibling elements should also float.
- There are multiple sub boxes in a box. If one box floats, the other brothers should also float to prevent problems.
- A floating box will only affect the standard flow behind the floating box, not the standard flow in front of it
The floating element in front of us has a parent element of the standard flow. They have a common feature that they all have a high degree
But must all parent boxes have a height?
In the ideal state, let the box open, father My father's box is as tall as there are many children
But is there a problem not giving the height of the parent box?
3. Clear float
3.1 why do I need to clear the float?
In many cases, it is inconvenient to give the height of the parent box, but the child box floats and does not occupy a position. Finally, when the height of the parent box is 0, the following standard flow box will be affected.
Since the floating element no longer occupies the position of the original file stream, it will affect the layout of subsequent elements
3.2 clear floating essence
- The essence of clearing floating is to clear the influence caused by floating elements
- If the parent box itself has a height, you do not need to clear the float
- After floating is cleared, the parent will automatically detect the height according to the floating sub box. If the parent has a height, it will not affect the following standard flow
3.3 floating removal method
selector{clear:Attribute value;}
In our actual work, we almost only use clear: both;
The strategy to clear floating is to close floating
Specific method
- Additional labeling method, also known as partition method, is recommended by W3C.
- Add overflow attribute to parent
- Add after pseudo element to parent
- Add double pseudo element to parent
- Additional labeling method
Additional labeling method, also known as partition method, is recommended by W3C.
The extra tag method adds an empty tag to the end of the floating element. For example, < div style = "clear:both" > < / div >, or other labels (such as < br / >).
- Advantages: easy to understand and write
- Disadvantages: add many meaningless tags and poor structure
Note: this new empty tag must be a block level element.
Summary:
- What is the essence of clearing floating?
The essence of clearing floating is to clear the impact caused by floating elements leaving the standard flow - What is the clear float strategy?
Close float Only let the float affect the inside of the parent box, and do not affect other boxes outside the parent box - Additional labeling method?
The partition method is to add an additional label after the last floating sub element and add a clear floating style
It may be encountered in actual work, but it is not often used
- Add overflow to parent
You can add an overflow attribute to the parent and set its attribute value to hidden, auto, or scroll.
If the child doesn't teach, the father's fault. Pay attention to adding code to the parent element
- Advantages: simple code
- Disadvantages: the overflow part cannot be displayed
- : after pseudo element method
: after mode is an upgraded version of the additional labeling method. It is also added to the parent element
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6,7 proper */
*zoom: 1;
}
- Advantages: no label is added, and the structure is simpler
- Disadvantages: take care of low version browsing
- Representative websites: Baidu, Taobao, Netease, etc
- Double pseudo element clear float
It is also added to the parent element
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
- Advantages: more concise code
- Disadvantages: take care of lower version browsers
- Representative websites: Xiaomi, Tencent, etc
3.4 clear float summary
① The parent has no height.
② The sub box floated.
③ If the following layout is affected, we should clear the float.
