I believe many people have this question. Which one is better, float or position:absolute, in page layout? Since it is a layout, it is better to use float. I use this more often. This float can be cleared and generally will not affect the overall layout. Position, positioning, is not constrained. It seems that this is not a layout. Generally, you can consider using it when doing special positioning or floating layers. For normal page layout, I personally recommend using the FLOAT
1.float attribute to define the direction in which the element floats. Historically this property has always been applied to images, causing the text to wrap around the image, but in CSS, any element can be floated. A floated element creates a block-level box, regardless of what type of element it is. p is a typical block-level element that occupies a line by itself.
Let’s first look at how the most basic block-level elements are arranged. html code, the following styles are based on this.
Copy code The code is as follows:
Box 1
css code:
Copy code The code is as follows :
.boxBg{ margin: 0 auto; width:500px;
height:200px; border:2px solid #ccc
}
.box1{
width:100px;
height:50px;
background-color:red
}
.box2{
width:100px;
height:50px;
background-color:blue
}
.box3{
width:100px;
height:50px;
background-color:green
}
Execution results:
Since p is a block-level element, the boxes will be arranged vertically. In actual operation, it is often necessary to arrange the frames horizontally. There are two ways to do this. The first is display:inlin-block;
Copy code
.boxBg{ margin: 0 auto; width:500px;
height:200px; border:2px solid #ccc
}
.box1{
width:100px;
height:50px;
background-color :red;
display:inline-block
}
.box2{
width:100px;
height:50px;
background-color:blue;
display:inline -block
}
.box3{
width:100px;
height:50px;
background-color:green;
display:inline-block
}
Execution result:
As for the gap in the middle, the essential reason is traced back to the white space between elements, so set fone- on the parent element size, you can adjust the size of the blank gap.
Copy code
.boxBg{ margin: 0 auto; width:500px;
height:200px ; border:2px solid #ccc;
font-size:34px;
}
After changing font-size:34px, the gap will become wider.
Execution result:
Similarly, to remove the gap, you need to copy font-size:0;
Code
.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc;
font-size:0
}
Execution result:
The desired layout is achieved, and the text inside the box disappears, as well. Prove that the size of the text affects the gap. Just reset it in the child element. Of course that's not the focus today. The same effect float:left; can also be easily achieved.
Copy code The code is as follows:
Execution result:
After adding float to the element, the floating element will hit the parent element border or another floating element border, immediately adjacent to it. displayed later. For example, in the following example, when the total width of the floating element is greater than the parent element, the line is wrapped. When the line is wrapped, the previous float is encountered and displayed after it
Copy code The code is as follows:
Execution result:
What will be the result if inline-block is used?
Copy code The code is as follows:
Execution result:
At this time, box 3 starts on a new line instead of following box 1, (1,2 The gap between them will not be discussed here) This is also a judgment of using inline-block and float. If the module width is different, using float typesetting may lead to different results from the expected results, so use float when the width and height remain unchanged. It is excellent, but if it is inconsistent, you need to look at the specific layout and use the appropriate attributes.
The code is posted below, only the modified part is posted, the rest remains unchanged, and the structure remains unchanged.
What will be the result if the float:left of box3 is removed? According to understanding, floating elements do not occupy space, that is, frame 3 will ignore frame 1, and frame 2 will be displayed directly next to the border of the parent element, that is, frame 1 will cover frame 3? What is the result?
Copy code The code is as follows:
.box3{
width:100px;
height:50px;
background-color: green;
}
Execution results:
Why does the text in box 3 appear below instead of being covered by box 1? Then look at the code, look at the picture
Copy code The code is as follows:
.box3{
height:50px;
background-color:green ;
}
Execution result:
Do you see the difference? Yes. box3 does not define width; the width is removed. Without defining the width, the default width is the width of the parent element, which means that at this time, width: 500px; the floating element covers the non-floating element, that is, the width of 200px in front of box 3 is occupied by the floating element. Covered, why is the text not covered and the text is squeezed 200px behind the floating element?
Floating elements will not occupy the space of the block, so box three is 100% of the parent container width 500px, but floating elements will occupy other space, which is the line box space. In layman's terms, it is occupied by the text. space.
This is also the reason why the text will automatically wrap around the image after it floats. Floated elements do not occupy block-level space, but will affect text and inline elements within block-level elements.
In this case, if you want the three boxes to have the same width, then you only need to change the width of the third box: 300px;
Copy the code The code is as follows:
.box3{
width:300px;
height:50px;
background-color:green;
}
Execution result:
Now that we have finished talking about the basic floating, let’s talk about the problems. Although floating is easy to use, it will also cause many problems in practice. For example:
Execution result :
Very common problem, under normal circumstances. The gray background should be as high as the frame, but the reality is always not satisfactory :)
The reason for this situation is known to be caused by floating. Yes, it is floating in many places. It is said that floating elements will break away from the ordinary flow, so ordinary elements can be treated as floating elements that do not exist, so the background will not be opened here. But students who read carefully will remember that it was mentioned above that floating elements will not affect the block frame. But it will affect the line box, that is, text or inline elements. Whether it is a block-level element or an inline element, it belongs to the ordinary flow. If the floating element breaks away from the ordinary flow, why will it affect the line box? In fact, I don’t think there is any need to dwell on these conceptual things. According to my understanding, floating elements are not in the same horizontal space as block-level elements, but in the same space as text inline elements, so the border here is equivalent to being on top of the background, so it will not affect the background elements. What is usually called clearing floats, It does not mean to remove the float attribute of the floating element, but to clear the floating elements around it so that there are no floating elements around it. Therefore, if you want box 3 to move to the second row, you cannot use clear:right; in box 2. You need to use clear:left;
Copy code The code is as follows:
.box3{
float:left;
width:100px;
height:50px;
background-color:green;
clear:left
}
Execution result:
ok! After understanding this, let’s talk about how to make the background and frame the same height. The first method: the most direct The way is to directly set the background height to be equal to the frame and it will be OK. Of course, this is not the point. Let’s talk about clearing the float. First look at the example:
Copy code The code is as follows:
The above is the detailed content of Comparison of css float attribute and position:absolute. For more information, please follow other related articles on the PHP Chinese website!

H5中如何灵活运用position属性在H5开发中,经常会涉及到元素的定位和布局问题。这时候,CSS的position属性就会发挥作用。position属性可以控制元素在页面中的定位方式,包括相对定位(relative)、绝对定位(absolute)、固定定位(fixed)和粘附定位(sticky)。本文将详细介绍在H5开发中如何灵活运用position属性

html把div放在底部的方法:1、使用position属性将div标签相对于浏览器窗口进行定位,语法“div{position:fixed;}”;2、设置到底部距离为0来把div永远放置于页面底部,语法“div{bottom:0;}”。

CSS布局属性优化技巧:positionsticky和flexbox在网页开发中,布局是一个非常重要的方面。良好的布局结构可以提高用户体验,使页面更加美观和易于导航。而CSS布局属性则是实现这一目标的关键。在本文中,我将介绍两种常用的CSS布局属性优化技巧:positionsticky和flexbox,并提供具体的代码示例。一、positions

常见的数据库float长度有:1、MySQL中的float类型长度,可以是4个字节或8个字节;2、Oracle中的float类型长度,可以是4个字节或8个字节;3、SQL Server中的float类型长度,固定为8个字节;4、PostgreSQL中的float类型长度,可以是4个字节或8个字节等等。

position属性取值有static、relative、absolute、fixed和sticky等。详细介绍:1、static是position属性的默认值,表示元素按照正常的文档流进行布局,不进行特殊的定位,元素的位置由其在HTML文档中的先后顺序决定,无法通过top、right、bottom和left属性进行调整;2、relative是相对定位等等。

在H5中使用position属性可以通过CSS来控制元素的定位方式:1、相对定位relative,语法为“style="position: relative;”;2、绝对定位absolute,语法为“style="position: absolute;”;3、固定定位fixed,语法为“style="position: fixed;”等等。

float属性取值有left、right、none、inherit、clearinline-start和inline-end。详细介绍:1、left,元素向左浮动,即元素会尽可能地靠近容器的左边,其他元素会围绕在其右侧;2、right,元素向右浮动,即元素会尽可能地靠近容器的右边,其他元素会围绕在其左侧;3、none默认值,元素不浮动,会按照正常的文档流排列等等。

CSS层叠属性解读:z-index和position在CSS中,布局和样式的设计是非常重要的。而在设计中,经常需要对元素进行层叠和定位。两个重要的CSS属性,即z-index和position,可以帮助我们实现这些需求。本文将深入探讨这两个属性并提供具体的代码示例。一、z-index属性z-index属性用于定义元素在垂直方向上的堆叠顺序。元素的层叠


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

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Atom editor mac version download
The most popular open source editor

Dreamweaver Mac version
Visual web development tools

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
