The difference between float and position attributes of CSS layout


CSS layout – position attribute

The position attribute specifies the type of positioning method (static, relative, fixed, absolute, or sticky) applied to the element.

Position attribute

The method applied to the position attribute of the specified element.

There are five different location values:


Elements are actually located using the top, bottom, left, and right attributes. However, these properties will not work unless the position property is set first. They work differently depending on the position value.

CSS layout – floating and clearing

Float attribute
The float attribute is used to locate and format content, such as floating an image to the left to the text in the container.

The float property can be set to one of the following values:

Left – the element floats to the left of its container
Right – the element floats to the right of its container
None – the element does not float (it will appear where it just appeared in the text). Default value.
Inherit – the element inherits the float value of its parent
The simplest use is that the float attribute can achieve the effect of text surrounding the picture.

float: left|right; You can arrange and fold lines automatically, but you need clear to clear the float; Display: inline block can sometimes replace float to achieve the same effect

position: absolute|relative; Coordinate with top, left and other positioning;


position: absoluteIt will cause the element to be separated from the document flow. The located element does not occupy any position in the document and is rendered in another layer. You can set Z-index. The layer effect of PS is position: absolute.
Float can also cause elements to leave the document flow, but also occupy a position in the document or container, squeezing the document flow and other float elements to the left or right, and may cause line breaks. The text surrounding layout effect of the picture is float.
The inline block of display is not separated from the document stream, and the block element is embedded into the document stream as a large character, similar to the default effect of img or input.

Difference between CSS layout floating and positioning properties

CSS has three basic positioning mechanisms: normal flow, floating and absolute positioning. First, the position of element box in normal flow is determined by the position of element in XHTML. Block level elements are arranged from top to bottom, and the vertical distance between boxes is calculated by the vertical margin of the box. Elements within a row are arranged horizontally in a row. Ordinary flow is the elements in HTML document, such as block level elements and inline elements, which are displayed in the document according to their display attributes

Position: relative refers to the relative positioning of child block level elements facing parent elements. The positioning keyword is left / right / top / bottom. Sibling block elements are positioned relative to each other, but the original position remains after the position is moved. And the subsequent sibling block element positioning is based on the position before being removed.

Float: right / left refers to the positioning of the sub block level element flow set facing the parent element. The positioning keyword uses margin / padding. The relative positioning between sibling block elements is re rendered based on the new position after moving, which can overlap and the original position is cleared.

The biggest difference between the two is location reservation.

People can use this difference to make the sliding door menu of CSS code.

Developeppaer supplement

Generally, the page layout uses float, but you need to pay attention to clearing the float. Some special effects generally use Poston. The elements using Poston can appear anywhere on the page, which is convenient for some prompt boxes, special effects, etc.

Specifically, you can study it slowly according to the page F12 you see, and you will find that there are a lot of fun

Recommended Today

Big data Hadoop — spark SQL + spark streaming

catalogue 1、 Spark SQL overview 2、 Sparksql version 1) Evolution of sparksql 2) Comparison between shark and sparksql 3)SparkSession 3、 RDD, dataframes and dataset 1) Relationship between the three 1)RDD 1. Core concept 2. RDD simple operation 3、RDD API 1)Transformation 2)Action 4. Actual operation 2)DataFrames 1. DSL style syntax operation 1) Dataframe creation 2. SQL […]