search
HomeWeb Front-endCSS TutorialIntroduction to the definition and usage of CSS floating and positioning


1. Floating

1. Floating elements

1. For floating elements, there are several points to remember:
First of all, it will be in some way The method removes floating elements from the normal flow of the document, but it will still affect the layout;
2. Adopting the unique method of CSS, floating elements are almost "in a class of their own", but they still affect the rest of the document. ;
3. When an element floats, other elements will "surround" the element. Margins around floated elements are not merged.
4. Not floating: float:none is used to prevent elements from floating.

2. The detailed inside story of floating

Before we understand the contents of floating in detail, we must first know what a containing block is.
The containing block of a floating element is its nearest block-level ancestor element.
css provides a series of rules to control the placement of floating elements:

  • The left (or right) outer boundary of a floating element cannot exceed the left (or right) edge of its containing block ) inner boundary;

  • The left (or right) outer boundary of the floating element must be the right (or left) outer boundary of the left floating (or right floating) element that previously appeared in the source document , unless the top of the later floated element is below the bottom of the first floated element.

  • The left-floated element's right outer border will not be to the right of the right-floated element's outer border.

  • The top of a floating element cannot be higher than the inner top of its parent element;

  • The top of a floating element cannot be higher than all previous floats The top of an element or block-level element is higher.

  • If a floated element precedes another element in the source document, the top of the floated element cannot be higher than the top of any line box containing the box generated by the element

  • There is another floating element to the left (right) of the left (or right) floating element, and the right outer boundary of the former cannot be to the right (left) of the right (left) boundary of its containing block

  • Floating elements must be placed as high as possible

  • The left floating element must go as far to the left as possible, and the right floating element must go as far to the right as possible.

3. Practical behavior

First, let’s take a look at what happens when a floating element is taller than its parent element.
css2.1 clarifies one aspect of the behavior of floated elements: floated elements stretch to include all of their descendant floated elements. So, by setting the parent element as a floating element, you can include the floating element within its parent element.

4. Negative margins

Negative margins may cause floating elements to move outside of their parent elements. By setting negative margins, an element may appear wider than its parent, in the same way that a floated element may appear wider than its parent.
It seems that this rule seems to contradict the previous one (the floating element is placed outside its parent element);
But if you carefully study the rules in the previous section, you can find that this is actually technically Allowed, the outer bounds of a floated element must be within the parent element, but because the margins are negative, the content of the floated element is placed as if it covers its own outer bounds.

5. Floating elements, content and overlap

There is also an interesting question, what happens if a floating element overlaps the content in the normal flow?
css2.1 specifies the following rules:

  • When an inline box overlaps a floating element, its border, background, and content are all displayed "on top" of the floating element.

  • When a block box overlaps a floating element, its border and background are displayed "below" the floating element, and the content is displayed "above" the floating element.

6. Clear

Sometimes, we may not always want content to flow through floating elements. In some cases, we may want to deliberately avoid this behavior. For example:
To ensure that all h3 elements are not placed to the right of the left floating element, you can set h3{clear:left;}. This can be understood as "make sure there is no floating image on the left side of an h3";

2. Positioning

1. Basic concept

Using positioning, you can accurately define the relative elements of the frame Where it should appear relative to its normal position, or to set the position of the browser window itself relative to a parent element or another element.

2. Positioning type

  • static (initial value):
    The element box is generated normally, and the block-level element generates a rectangular box as part of the document flow. , an inline element will create one or more line boxes and place them within its parent element.

  • relative:
    The element box is offset by a certain distance. The element retains its unpositioned shape and the space it originally occupied.

  • absolute:
    The element box is completely removed from the document flow and positioned relative to its containing block, which may be another element in the document or the initial containing block. The space previously occupied by the element in normal document flow is closed, as if the element did not exist. A block-level box is generated after the element is positioned, regardless of what type of box it originally generated in the normal flow.

  • #fixed:
    The element box behaves like setting position to absolute, but its containing block is the window itself.

3. Containing block

For floating elements, the containing block is defined as the nearest block-level ancestor element.
For positioning, the situation is more complicated:
- The containing block (also called the initial containing block) of the "root element" is established by the user agent. In HTML, the root element is the html element, but some browsers use body as the root element.
- For a non-root element whose position value is relative or static, the containing block is bounded by the content of the nearest block-level box, table cell, or inline block ancestor box.
- For a non-root element, if its position value is absolute, the containing block is set to the nearest ancestor element whose position value is not static.

4. Offset attribute

We have introduced three positioning mechanisms and use four attributes to describe the offset of each side of the positioning element relative to its containing block. We call these four properties offset properties, which are an important part of completing positioning.
- For top and bottom, relative to the height of the containing block
- For right and left, relative to the width of the containing block
These properties describe the offset from the nearest edge of the containing block, so it is also named offset.

5. Width and height

Set width and height

If you want to specify a specific width for a positioned element, you must obviously use the width attribute. Similarly, use height, It is also possible to declare a specific height for positioned elements.

Limit width and height

You can use min-width and min-height to define a minimum size for the content area of ​​the element.
Similarly, you can also use the attributes max-width and max-height to limit the size of elements.

6. Content overflow and clipping

Overflow

Suppose that for some reason, an element is fixed to a specific size, but the content cannot fit in the element. At this time You can use the overflow attribute to control this situation;
- visible:
Default value, indicating that the content of the element can also be seen outside the element box. Typically, this causes the content to extend beyond its own element box, but does not change the shape of the box.
- hidden:
The content of the element will be cropped at the boundary of the element box, and no scrolling interface will be provided to allow users to access content beyond the clipping area;
- scroll:
The element's content is clipped at the bounds of the element's box, but a scrolling mechanism is provided for the user to use.

7. Content clipping

If the content of an absolutely positioned element overflows its content box, and overflow is set to require clipping of the content, the shape of the clipping area can be changed by using the clip attribute.
clip:rect(top,right,bottom,left);

8. Element visibility

In addition to clipping and overflow, you can also control the visibility of the entire element.
visibility:
- visible visible
- hidden Invisible.
-collapse
- inherit
visibility:collapse When used within a table element, this value removes a row or column, but it does not affect the layout of the table. The space occupied by rows or columns is made available for other content. If this value is used on another element, it will be rendered as "hidden".
visibility:hidden When an element is in the "invisible" state by setting visibility, the element will still affect the layout of the document as if it were still visible. In other words, the element is still there, you just can't see it. This is different from display:none, which is not only invisible. It will also be deleted from the document, so it will have no impact on the document layout.

9. Absolute positioning

Containing blocks and absolutely positioned elements

When an element is absolutely positioned, it will be completely deleted from the document flow. It is then positioned relative to its containing block. This means that absolutely positioned elements may cover other elements, or be covered by other elements.
The containing block of an absolutely positioned element is the nearest ancestor element whose position value is not static. Creators usually select an element as the containing block of an absolutely positioned element, specify its position as relative and have no offset.

Auto edge offset

The general meaning of the term static position of an element is: the original position of the element in the normal flow. More specifically, the "top" static position is the distance from the top edge of the containing block to the top margin edge of the imaginary box.

10. Placement and size of non-replaced elements

Generally, the size and position of an element depends on its containing block. The value of each attribute will also have some influence, but the most important one is its containing block.

11. Placement and size of replaced elements

The positioning rules for non-replaced elements and replaced elements are quite different. This is because the replaced element has an inherent height and width, so its size will not change.
When determining the position and size of a replaced element, the behavior involved is most easily described by the following rules:
- If width is set to auto, the actual width used is determined by the inherent width of the element's content.
- In languages ​​that read from left to right, if the value of left is auto, replace auto with a static position. The same applies from right to left;
- If left or right is still auto, replace the auto value of margin-left or margin-right with 0;
- If margin-left and margin-right are both defined as auto at this time, set them to equal values, thereby centering the element in its containing block;
- After this, if there is only one auto value left, modify it to be equal to the rest of the equation.

12. Placement on the Z axis

Controlled by the attribute z-index

13. Fixed positioning

Fixed positioning is very similar to absolute positioning. It's just that the containing block of the fixed element is the window. With fixed positioning, the element is completely removed from the document flow and has no position relative to any part of the document.

14. Relative positioning

The simplest positioning mechanism to understand is relative positioning. When this mechanism is adopted, the positioned element is moved by using the offset attribute.

The above is the detailed content of Introduction to the definition and usage of CSS floating and positioning. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
利用CSS怎么创建渐变色边框?5种方法分享利用CSS怎么创建渐变色边框?5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框?下面本篇文章给大家分享CSS实现渐变色边框的5种方法,希望对大家有所帮助!

css ul标签怎么去掉圆点css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

css与xml的区别是什么css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

css怎么实现英文小写转为大写css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

rtl在css是什么意思rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

css怎么设置i不是斜体css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

怎么设置rotate在css3的旋转中心点怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools