Preface
The floating property is a very important property in the CSS style. The navigation bar and left and right navigation bars of the web page are all completed by the floating property. The floating property not only allows the text to have a wrapping effect, at the same time, its floating feature also plays a vital role in some layouts.
1. What is float?
What is float?
In a normal div layout, each div block element occupies a complete line, so the next div element will appear on the next line of the previous div element, and the entire layout is arranged in order from top to bottom.
Floating breaks this arrangement. The floating attribute makes the elements that should be arranged from top to bottom float to the upper level, floating to the left or right like a balloon.
Second, the use of floating attributes
1. How to use
Add the float attribute to the style, where the value is left to float to the left, the value is right to float to the right, the value is none to not float, and none is the default value.
I am box1
I am box2
I am box3
2. Features
① Block element becomes inline element
In the figure, box1 and box3 are floating to the left, and box2 is floating to the right. Although box3 is displayed after box2, the position of box3 is obviously in the same row as box2 and the floating direction is not affected by the order. The div block element is on its own line, and the characteristics of the floating attribute make it an inline element.
③ Make inline elements have width and height
These are three in-line elements. When the width and height are defined, the width and height are determined by the content, not the width and height definition.
.box1 {
display: inline;
width: 100px;
height: 100px;
background-color: #bdf;
/* float: left; */
}
.box2 {
display: inline;
width: 90px;
height: 90px;
background-color: orange;
/* float: left; */
}
.box3 {
display: inline;
width: 80px;
height: 80px;
background-color: green;
/* float: left; */
After adding the floating style, it is still an inline element, and it has a width and height. (The floating attribute is still supported by the content when the width and height are not set)
③ Get out of the document flow
This is a parent element and a child element. The parent element has no height set and is supported by the child element.
After adding the floating attribute to the child element.
It can be clearly found that the child element has jumped out of the parent element's range and did not support the parent element. The floating attribute will cause the element to leave the document flow, causing the height of the parent element to collapse.
Third, the solution of high collapse-BFC
The separation of the child element from the parent element's document flow will cause the parent element to collapse in height, which has a very serious impact on the page layout. And BFC (Block formatting context) effectively solves the problem of high collapse.
After the element turns on BFC, it will have the following characteristics:
The vertical margin of the parent element will not overlap with the child element
Elements with BFC enabled will not be covered by floating elements
The element that turns on BFC can contain floating sub-elements
1. Turn on BFC mode
① Set floating attributes for elements (not recommended)
.outer {
border: orange solid 10px;
float: left;
/*Floating attribute is set here*/
}
.inner {
width: 90px;
height: 90px;
background-color: #bdf;
float: left;
Disadvantages: The newly added float element will cause new floating problems. And the fact that the parent element div block element is on its own line disappears, which may cause the element behind the parent element to move up, which cannot fundamentally solve the problem.
② Set the width and height of the parent element (not recommended)
.outer {
width: 100px;
height: 100px;
/*Set fixed height 100px, width 100px*/
border: orange solid 10px;
}
.inner {
width: 90px;
height: 90px;
background-color: #bdf;
float: left;
Disadvantages: After the parent element has a fixed width and height, it loses its highly adaptive function and is not flexible enough.
③ Add an empty div after the child element
Advantages: container overflow will not be clipped and supports all browsers.
Disadvantages: There is an empty div, which increases code redundancy.
④ The element overflow is set to hidden or other non-visible values
.outer {
overflow: hidden;
/*Overflow clipping, IE6 and below use auto*/
border: orange solid 10px;
}
.inner {
width: 90px;
height: 90px;
background-color: #bdf;
float: left;
}
Advantages: simple.
Disadvantages: Can not be used in conjunction with position positioning, the excess size will be cropped.
⑤ The element display is set to inline-block (not recommended)
.outer {
display: inline-block;
border: orange solid 10px;
}
.inner {
width: 90px;
height: 90px;
background-color: #bdf;
float: left;
}
Disadvantages: The div block element of the parent element disappears, which may cause the element behind the parent element to move up, which cannot solve the problem fundamentally.
⑥ Add a pseudo element after the parent element (recommended)
Dalian Women's Hospital http://xmobile.bhbyby.com/
.outer {
display: inline-block;
border: orange solid 10px;
}
.outer:after{
content: "";
height: 0;
overflow: hidden;
/*Compatible with IE browser*/
clear: both;
/*Eliminate the influence of left and right floating*/
display: block;
/*This is an in-line element, which is transformed into a block element to support the parent element*/
visibility: hidden;
}
.inner {
width: 90px;
height: 90px;
background-color: #bdf;
float: left;
}
Advantages: simple and no code redundancy.
⑦ Element position is set to absolute
.outer {
position: absolute;
/*Or fixed*/
border: orange solid 10px;
}
.inner {
width: 90px;
height: 90px;
background-color: #bdf;
float: left;
}
Disadvantages: The div block element of the parent element disappears, which may cause the element behind the parent element to move up, which cannot solve the problem fundamentally. And the parent element of this parent element may be affected by its absolute positioning.