float and layout
The original intention of floating is to solve a typesetting problem: to achieve the effect of text wrapping pictures, but there are no good layout tools in the early days of the Web, so floating is widely used as a layout tool: (picture from 1 )
Floating is a compulsory course for every front-end person. The first lesson of my front-end is to use floating animation color blocks. When the entire web page is filled with colorful color blocks, I feel a sense of accomplishment:
<style>
.a {
width: 1000px;
height: 100px;
background-color: oldlace;
}
.a1 {
width: 150px;
height: 100px;
background-color: orange;
float: left;
}
.a2 {
width: 600px;
height: 100px;
background-color: peru;
float: left;
}
.a3 {
width: 100px;
height: 100px;
background-color: chocolate;
float: right;
}
.b {
width: 1000px;
height: 300px;
background-color: LightSalmon;
}
.c {
width: 1000px;
height: 300px;
background-color: seashell;
}
.c1 {
width: 250px;
height: 150px;
background-color: Coral;
float: left;
}
.c2 {
width: 250px;
height: 150px;
background-color: OrangeRed;
float: left;
}
.c3 {
width: 250px;
height: 150px;
background-color: DarkSalmon;
float: left;
}
.c4 {
width: 250px;
height: 150px;
background-color: Tomato;
float: left;
}
.c5 {
width: 250px;
height: 150px;
background-color: Salmon;
float: left;
}
.c6 {
width: 250px;
height: 150px;
background-color: Brown;
float: left;
}
.c7 {
width: 250px;
height: 150px;
background-color: LightCoral;
float: left;
}
.c8 {
width: 250px;
height: 150px;
background-color: RosyBrown;
float: left;
}
</style>
<div class="a">
<div class="a1">LOGO</div>
<div class="a2">导航</div>
<div class="a3">注册登录</div>
</div>
<div class="b">大图</div>
<div class="c">
<div class="c1">1</div>
<div class="c2">2</div>
<div class="c3">3</div>
<div class="c4">4</div>
<div class="c5">5</div>
<div class="c6">6</div>
<div class="c7">7</div>
<div class="c8">8</div>
</div>
Online demonstration , it is recommended to copy the code to open locally, the effect is better.
When drawing color blocks, first use PS to measure the width and height, and then use CSS to write the height, width, background color and remarks. The name is based on abcdefg. After the painting is completed, the entire webpage will be colorful, isn’t it beautiful? ah.
This is the floating layout.
[Points] Floating layout points:
- First analyze the design draft, and divide the content of the web page into blocks from large to small.
- Use PS to measure the height and width of each block.
- Animate blocks of color with CSS+float.
Floating Layout FAQ
**Problem 1: Exceeding the width. **If the content exceeds the width of the container, the small box behind it will fall out:
<style>
.a {
width: 1000px;
height: 100px;
background-color: wheat;
}
.a1 {
width: 300px;
height: 100px;
background-color: skyblue;
float: left;
}
.a2 {
width: 400px;
height: 100px;
background-color: cadetblue;
float: left;
}
.a3 {
width: 400px;
height: 100px;
background-color: steelblue;
float: left;
}
</style>
<div class="a">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
If you find that a certain color block falls out when you draw the color block, it means that you measure a little too much when measuring the width. It is indeed easy to make mistakes when measuring the height, because when there are many color blocks, the eyes will be blurred. It is recommended to take more rest in the middle, don't be rigid, and the body is important.
**Question 2, the height of the disappearing box. **Some students found a strange phenomenon when drawing color blocks:
<style>
.a {
width: 1000px;
background-color: lavender;
}
.a1 {
width: 500px;
height: 100px;
background-color: Indigo;
float: left;
}
.a2 {
width: 500px;
height: 100px;
background-color: Violet;
float: left;
}
.b {
width: 1000px;
height: 300px;
background-color: Purple;
}
</style>
<div class="a">
<div class="a1"></div>
<div class="a2"></div>
</div>
<div class="b">大图</div>
The box of the big picture is obviously set to a height of 300px, why is there only 200px left? Where did the height of the b box go, and why? ? ? why? ? ?
[Interpretation] The reason is that box a has no height set, which causes box b to move up by 100px. This is a very common mistake: forgetting to set a height for a box. In the actual development process, there are many boxes, and there is no hint of color blocks, so it is easy to forget the height. Generally speaking, the phenomenon of separation of text and background on web pages is mostly due to this kind of error. The solution is to set the height, or clear the float.
[Thinking] Some students saw the two words "big picture" appearing under the box a. If they were translated, the words should be on the top. How to explain this?
floating nature
Floating boxes will break out of the document flow
Why does the second situation above appear? This is because floats are out of normal document flow, exactly half a layer out of document flow. Breaking away from the document flow means that the background of the floating box is separated from the document flow, but the content still occupies the original position :
code:
<style>
.a {
width: 100px;
height: 100px;
background-color: rgb(0, 0, 0, 0.2);
float: left;
}
.b {
background-color: orange;
}
</style>
<div class="a"></div>
<div class="b">
<p>窗前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</div>
[Interpretation] First, give the a box a width, height and transparent color, and set the float, and then add content and set the background color to the b box. Because the background of the floating box is out of the document flow, the background of the b box is moved up, but the content of the a box is not out of the document flow, so the content of the b box is pushed aside. If the width of box a is set to 100%, the content of box a will be completely squeezed out, and if a fixed height is set for b, the content will be separated from the background:
<style>
.a {
width: 100%;
height: 100px;
background-color: rgb(0, 0, 0, 0.2);
/*注释浮动会正常排布*/
float: left;
}
.b {
height: 150px;
background-color: orange;
}
</style>
<div class="a"></div>
<div class="b">
<p>窗前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</div>
In order to prevent the background height of the floating box from collapsing and causing chaotic typesetting, it can be solved by wrapping the floating box with a fixed-height container:
<style>
.wrapper {
height: 100px;
}
.a {
width: 100px;
height: 100px;
background-color: rgb(0, 0, 0, 0.2);
float: left;
}
.b {
background-color: orange;
}
</style>
<div class="wrapper">
<div class="a"></div>
</div>
<div class="b">
<p>窗前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</div>
This will not affect the arrangement of subsequent elements.
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-TZIMbBB4-1665961352336)(image-20221016155604680.png)]
The position of the floated element
Floated boxes break out of the document flow (half-level), then abut the left or right border of the parent element or other floated boxes, and abut the top edge of the parent element. If the remaining width of the parent element cannot fit the floating element, the floating box will start a new line and continue to be arranged in order.
[Important] The floating boxes are next to each other without any gap, if no margin is set.
[Case] Clear the gaps between pictures.
<style>
.a {
width: 300px;
background-color: rgb(0, 0, 0, 0.2);
}
.a img {
width: 100px;
}
</style>
<div class="a">
<img src="https://images.pexels.com/photos/13313507/pexels-photo-13313507.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load" alt="">
<img src="https://images.pexels.com/photos/7961265/pexels-photo-7961265.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load" alt="">
</div>
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-EtgnbsLd-1665961352337)(image-20221016161512795.png)]
Take a closer look at the above two pictures, there is a gap between them, the gap is formed by the blank characters between the picture elements, you can write the two pictures next to each other, without spaces or newlines:
<img src="..." /><img src="..." />
But this solution is unreliable, because the code may hang after formatting, so by adding floating to the two pictures, this problem can be perfectly solved (the background will disappear after adding the floating). Online Demo :
Floating boxes contribute zero to the height of the parent element
In the normal layout flow, if the parent element does not set a height value, then its height is equal to the height of the expanded content, also called the natural height. However, the floating box contributes zero to the height of the parent element. If a container only contains floating boxes (floating layout), then its height is zero. This phenomenon is called parent element collapse:
The collapse of the parent element will not only affect the current container, but all subsequent elements may be affected, especially when the content in the container is beneficial:
The previous case solved this problem by setting a height value for the parent element, which has an obvious disadvantage: it will fail when the content height is uncertain or the content exceeds the container height. Is there any way to eliminate the side effects of floating and maintain the natural height of the parent element?
The first method: set the parent element container:
overflow: hidden;
This way the elements inside won't affect the outside. Although this method solves the side effects, it does not solve the natural height problem.
clear float
Clear float and float are twin brothers. Although float is easy to use, sometimes it is not "obedient": it may affect other elements. Clear float is used to "wipe the ass" of the floating box.
The clear attribute defines on which side of the element floating elements are not allowed. In CSS1 and CSS2, this is achieved by automatically adding a top margin to clear elements (those that have the clear property set). In CSS2.1, a clearing space is added above the element's top margin, but the margin itself does not change. Either way, the end result is the same, making the element's top border border just below the bottom margin border of elements floated on that side, if declared left or right cleared .
Common declaration methods:
clear: none;
clear: left;
clear: right;
clear: both;
Take the above question.
The second method: Create an empty element and set it .clear{clear:both;}to form an isolated area (the height of the box needs to be removed at this time):
<div class="box cyan">
<div class="side orange right">很长的侧边栏</div>
<p>
君不见黄河之水天上来②，奔流到海不复回。
君不见高堂明镜悲白发③，朝如青丝暮成雪④。
</p>
<div class="clear"></div>
</div>
<div class="lime">
人生得意须尽欢⑤，莫使金樽空对月⑥。
天生我材必有用⑦，千金散尽还复来⑧。
烹羊宰牛且为乐，会须一饮三百杯⑨。
岑夫子⑩，丹丘生⑪，将进酒，杯莫停⑫。
</div>
Nice!!! It perfectly solves the problem of side effects and natural height, but this method will produce an extra empty element, which looks uncomfortable. Use ::afterpseudo elements to improve:
<style>
.box {
width: 300px;
/*height: 100px;*/ /*高度不需要*/
}
.side {
width: 100px;
height: 200px;
}
.right {
float: right;
}
.clearfix::after {
/*三条缺一不可*/
display: block;
content: '';
clear: both;
/*兼容性*/
visibility: hidden;
height: 0;
}
.orange {
background-color: orange;
}
.lime {
background-color: lime;
}
.cyan {
background-color: cyan;
}
</style>
<div class="box cyan clearfix">
<div class="side orange right">很长的侧边栏</div>
<p>
君不见黄河之水天上来②，奔流到海不复回。
君不见高堂明镜悲白发③，朝如青丝暮成雪④。
</p>
</div>
<div class="lime">
人生得意须尽欢⑤，莫使金樽空对月⑥。
天生我材必有用⑦，千金散尽还复来⑧。
烹羊宰牛且为乐，会须一饮三百杯⑨。
岑夫子⑩，丹丘生⑪，将进酒，杯莫停⑫。
</div>
Just set a style for the parent element: clearfix can perfectly eliminate the side effects of floating.
summary
- Floating elements will be out of the document flow for half a layer, and the background of floating elements will be out of the document flow.
- Floated elements do not contribute height to the parent element.
- Floating elements have excellent properties: inline elements can also set height, width, top and bottom margins, and there is no margin collapse.
- Floating elements may affect the typesetting of subsequent elements, you can use clear to clear the floating, and it is better to use the encapsulated clearfix class.
reference article
♥ I'm a front-end engineer: your sweetheart Sen. Thank you very much for your likes and attention, and welcome everyone to participate in discussions or collaborations.
★ This article is open source , using the CC BY-SA 4.0 protocol , please indicate the source for reprinting: Self-cultivation of front-end engineers . GitHub.com@xiayulu.
★ For creative cooperation or recruitment information, please send a private message or email: [email protected], specifying the subject: creative cooperation or recruitment of front-end engineers .
Isabella. The principle and method of css clearing floating . segmentfault. ↩︎