CSS Float layout process and the clichéd three-column layout
This article summarizes how to use the float attribute in CSS for layout. In fact, there are many articles on the Internet discussing this topic, but I feel that none of them get to the point. Let’s talk about a commonplace, CSS Float layout
Using CSS to lay out web pages is the basic skill of the front-end. What about two-column layout and three-column layout are also the basic questions of the front-end interview. Generally speaking, you can use the CSSposition property for layout, or the CSSfloat property for layout. The former is suitable for laying out the homepage, because the content on the homepage can often be fully controlled. The latter is suitable for layout templates where you have no control over the content filled in the template - for example, when editing a WordPress template, you certainly can't consider the length of each blog post. This blog post is to summarize how to use the float attribute in CSS for layout. In fact, there are many articles on the Internet discussing this topic, but I feel that none of them get to the point. Let’s talk about something old-fashioned, CSS’s Float layout.
Characteristics of p
The basic HTML element p of layout has several characteristics that will affect the subsequent layout. Note that the following features only apply to p that does not specify the width attribute and height attribute, because during the layout process with float, we only do this in specific positions (will be detailed later).
•An empty p has no height.
•The height of p with content depends on the height of the content.
•If the float attribute is not specified, the width of p will fill the width of the parent element (whether it is empty or not).
•If the float attribute is specified, the width of p will depend on the width of the inner element (so, an empty p will have neither height nor width after specifying the float attribute).
Many tutorials on the Internet often specify the width or height of p, and then explain the float attribute, which really interferes with my learning of layout. Remember, we only specify the width of p at a specific location.
Float layout process
In the practice process, I realized one thing, that is, p is rendered according to the order in the HTML document. In other words, we first decide the position of the previous p on the page, and then decide the position of the next p. Maybe this point is obvious, but it is really the key to understanding Float layout and is rarely mentioned in other tutorials on the Internet.
There is an HTML document like the following
The code is as follows:
<!DOCTYPE>
<html>
<head>
<style type="text/css">
#header{background-color: gray;}
#content{background-color: red;}
#sidebar{background-color: blue;}
#sidebar2{background-color: green;}
#footer{background-color: yellow;}
</style>
</head>
<body>
<p id="page">
<p id="header"><h1>这里是标题</h1></p>
<p id="sidebar">
<p>侧边栏</p>
</p>
<p id="sidebar2">
<p>侧边栏2：地图投影，是将地球表面投影到地图平面的过程，将地理坐标转换为平面直角坐
标的过程。因为毕业论文需要，我重新回顾了一下地图投影的知识并且作了比较全面且简洁的总
结。如果你之前未系统了解过地图投影，又对地图投影感兴趣，这篇博文也许能成为一篇简洁务
实的阅读材料。</p>
</p>
<p id="content">
<p>这里是一些文字</P>
<p>再来一大段文字</P>
<p>地图投影，是将地球表面投影到地图平面的过程，将地理坐标转换为平面直角坐标的过程。
因为毕业论文需要，我重新回顾了一下地图投影的知识并且作了比较全面且简洁的总结。如果你
之前未系统了解过地图投影，又对地图投影感兴趣，这篇博文也许能成为一篇简洁务实的阅读材
料。</p>
</p>
<p id="footer"><p>没人关注的页脚</P></p>
</p>
</body>
</html>There are 5 p’s in total. In order to make these p’s have height and width, add them to Added some text. There aren't any float attributes yet, so each p takes up the entire width of the parent element, and the height is determined by the content within it. The rendering effect is as follows:
What does the browser do when an element has a float attribute? I think it is like this:
1. The rendering browser detects that this element has the float:right attribute,
2. Limits the width of p according to its content (rather than trying to fill the width of the parent element)
3. Break away from the document flow and select such a position for rendering:
1. First, it must be in an area not occupied by the document flow, otherwise it may overwrite the already rendered document.
2. Secondly, there are no other float elements.
3. Finally, the document flow will not be affected after rendering. The document flow will proceed as it should, but the content in the document will automatically bypass float elements.
Try to set the float:left attribute of p#sidebar:
The code is as follows:
#sidebar{
float: right;
}
The sidebar does not float to the title bar. Even though there is no text to the right of the title bar. This is because the title bar is rendered before the sidebar. After the browser renders the title bar, it has forgotten whether there is content on the right side of the title bar, so it cannot float the sidebar to the title at the risk of overwriting the original content. on the bar. Next, the document flow is rendered the same way, except that the text bypasses the floated element, as if the floated element does not exist.
We want sidebar 2 to be on the left side of the page and sidebar 1 to be on the right side of the page. Because there is a lot of content in Sidebar 2, the width needs to be limited. For the sake of beauty, limit the width of 1 and assign the float attribute to sidebar 2.
The code is as follows:
#sidebar{
float: right;
width: 100px;
}
#sidebar2{
float: left;
width: 180px;
}
It looks a bit like a three-column layout. But we usually don’t want the middle column to extend below the sidebar when it is higher than the sidebar. The technique usually used at this time is to add margin attributes to the middle column, and the values on the left and right are the values of the two side columns.
code show as below:
#sidebar{
float: right;
width: 100px;
}
#sidebar2{
float: left;
width: 160px;
}
#content{
margin-left: 160px;
margin-right: 100px;
}
很好，一个三栏布局就完成了。虽然看上去很好，但是如果中栏的高度小于侧边栏会怎样？把中栏里的内容都删掉大部分，然后：
见鬼，页脚上去了……这可不是我希望的。那么还有一个技巧，就是在页脚使用clear属性。这个属性的作用就是，使文档流中元素在布局的时候，不允许左侧或右侧出现浮动元素。如果有，则在浮动元素的下方进行渲染。这里，为页脚添加clear属性。
代码如下:
#sidebar{
float: right;
width: 100px;
}
#sidebar2{
float: left;
width: 160px;
}
#content{
margin-left: 160px;
margin-right: 100px;
}
#footer{
clear: both;
}
页脚也正常了，这样，一个三栏布局就最终完成了。
最后，再来看一个例子吧，这个例子将解释两个问题：
1.当可渲染区域去除掉已有的浮动元素，剩下的那一块区域，其顶部不足以容纳浮动元素时，浮动元素将放弃渲染在顶部，而渲染在前面那个浮动元素的下方。
2.在以上的情况下，两个浮动元素仍然不在文档流中，可能会产生一些诡异的现象。
恢复中栏的内容，并改写CSS代码如下：
代码如下:
#sidebar{
float: right;
width: 200px;
}
#sidebar2{
float: left;
width: 300px;
}
这张图就清晰地说明了浮动元素其实是不在文档流之中的。首先，浏览器页面没有500像素宽，所以侧边栏2没法在顶部渲染（侧边栏1的存在使空间不够了），这时文档流仅仅进行到标题栏。因此中栏从标题栏下方开始渲染，为了绕开两个侧边栏，只好先在左上角写几个字，然后到侧边栏2右侧憋屈地渲染，最后才正常地舒展开（你可以这样想象，绿色和蓝色的后面，其实是没有文字的红色）。
更多CSS Float布局过程与老生常谈的三栏布局 相关文章请关注PHP中文网！
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What is the maximum value of float?
Oct 11, 2023 pm 05:54 PM
Maximum value of float: 1. In C language, the maximum value of float is 3.40282347e+38. According to the IEEE 754 standard, the maximum exponent of the float type is 127, and the number of digits of the mantissa is 23. In this way, the maximum floating point number is 3.40282347 e+38; 2. In the Java language, the maximum float value is 3.4028235E+38; 3. In the Python language, the maximum float value is 1.7976931348623157e+308.
What is the accuracy of float?
Oct 17, 2023 pm 03:13 PM
The precision of float can reach 6 to 9 decimal places. According to the IEEE754 standard, the number of significant digits that the float type can represent is approximately 6 to 9 digits. It should be noted that this is only the theoretical maximum precision. In actual use, due to the rounding error of floating point numbers, the precision of the float type is often lower. When performing floating-point number operations in a computer, precision loss may occur due to the precision limitations of floating-point numbers. In order to improve the precision of floating point numbers, you can use higher precision data types, such as double or long double.
What does float32 bytes include?
Oct 10, 2023 pm 04:07 PM
The float32 byte includes the sign bit, exponent bit and mantissa bit, and is used to represent 32-bit floating point numbers. Detailed introduction: 1. Sign bit (1 bit), used to represent the sign of a number, 0 represents a positive number, 1 represents a negative number; 2. Exponent bit (8 bits), used to represent the exponent part of a floating point number, through the exponent bit , you can adjust the size range of the floating-point number; 3. The mantissa bit (23 bits) is used to represent the mantissa part of the floating-point number, and the mantissa bit stores the decimal part of the floating-point number. The sign bit determines the sign of a floating point number, and the exponent bit and the mantissa bit jointly determine the size and precision of the floating point number.
What does float mean in c language?
Oct 12, 2023 pm 02:30 PM
Float in C language is a data type used to represent single-precision floating point numbers. Floating point numbers are real numbers represented in scientific notation and can represent very large or very small values. Variables of the float type can store values with 6 significant digits after the decimal point. In C language, the float type can be used to operate and store floating point numbers. Its variables can be used to represent decimals, fractions, scientific notation, etc. that need to be accurately represented. Real numbers, unlike integer types, floating point numbers can represent numbers after the decimal point, and can perform four arithmetic operations on decimals.
What are the database float lengths?
Oct 10, 2023 pm 03:57 PM
Common database float lengths are: 1. The float type length in MySQL can be 4 bytes or 8 bytes; 2. The float type length in Oracle can be 4 bytes or 8 bytes; 3. , The length of the float type in SQL Server is fixed at 8 bytes; 4. The length of the float type in PostgreSQL can be 4 bytes or 8 bytes, etc.
What problems will float layout cause?
Oct 10, 2023 pm 03:31 PM
Float layout can cause problems such as clearing floats, element overlapping problems, text wrapping problems, and responsive layout problems. Detailed introduction: 1. Clear the floating problem. When using float layout, the floating elements will break away from the document flow, which may cause the parent container to be unable to wrap the floating elements correctly. In this case, the height of the parent container will collapse, causing layout chaos; 2. Element overlapping problem. When multiple elements use float layout, they may overlap. This is because the floating elements no longer occupy the normal document flow position and so on.
What are the values of float attribute?
Oct 10, 2023 pm 02:03 PM
The float attribute values include left, right, none, inherit, clearinline-start and inline-end. Detailed introduction: 1. left, the element floats to the left, that is, the element will be as close to the left side of the container as possible, and other elements will surround it on the right side; 2. right, the element floats to the right, that is, the element will be as close to the container as possible On the right, other elements will surround it on the left; 3. The default value of none, the elements will not float, and will be arranged according to the normal document flow, etc.
What is the difference between float and double
Oct 11, 2023 pm 05:38 PM
The main differences between float and double lie in precision, storage and calculation speed, range, and use in programming languages. Detailed introduction: 1. The precision is different. Float is a single-precision floating point number, occupying 4 bytes (32 bits), while double is a double-precision floating point number, occupying 8 bytes (64 bits); 2. The storage and calculation speed are different. , double takes up more space and requires more storage space to store values. In applications that require high performance and speed, it may be more efficient to use the float type; 3. Different ranges, etc.
