CSS 언어의 어떤 항목이 부동 구문인가요?

CSS 언어의 부동 구문은 "float: 속성 값;"입니다. float 속성은 요소가 부동하는 방향을 정의하는 데 사용됩니다. 이는 상자(요소)를 표준 흐름에서 부동하게 만들고, 그 주변의 요소도 외부 가장자리가 포함하는 상자의 테두리에 닿을 때까지 재정렬됩니다. 또 다른 떠있는 상자. 이 속성에는 세 가지 속성 값이 있습니다. 1. "left"는 왼쪽으로 부동하는 요소를 정의합니다. 2. "right"는 오른쪽으로 부동하는 요소를 정의합니다. 3. "none"은 그렇지 않은 요소를 정의합니다. 떠다니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS 언어에서 요소가 부동하도록 하려면 부동 속성을 사용해야 합니다. 이 속성은 상자(요소)가 부동이어야 하는지 여부를 지정합니다. 과거에는 텍스트가 이미지 주위를 둘러싸도록 하기 위해 항상 이미지에 이 속성이 적용되었지만 CSS에서는 모든 요소가 부동할 수 있습니다. 부동 요소는 요소 유형에 관계없이 블록 수준 상자를 만듭니다.

대체되지 않은 부동 요소의 경우 명시적인 너비를 지정하세요. 그렇지 않으면 최대한 좁아집니다.

참고: 행에 부동 요소를 위한 공간이 거의 없으면 요소는 다음 행으로 점프하고 이 프로세스는 특정 행에 충분한 공간이 생길 때까지 계속됩니다.

float 속성의 세 가지 속성 값:

• left 요소가 왼쪽으로 부동합니다.

• right 요소가 오른쪽에 떠 있습니다.

• none 기본값입니다. 요소는 부동되지 않으며 텍스트에 나타나는 위치에 나타납니다.

Floating

1. CSS 레이아웃의 세 가지 메커니즘

---

css는 상자 배치를 설정하는 세 가지 메커니즘, 즉 일반 흐름(표준 흐름), 부동 및 위치 지정을 제공하며 그 중

1. 일반 흐름(표준 흐름: "블록 수준 요소"는 전용 라인을 차지하고 "위에서 아래로" 정렬됩니다. "인라인 요소"는 "왼쪽에서 오른쪽으로" 순서로 정렬되며 상위 요소의 가장자리 ;

2. 상자를 일반 흐름에서 "떠 있게" 합니다. 주요 기능은 여러 블록 수준 상자를 한 줄에 표시하는 것입니다.

3. 특정 위치 - CSS는 분리할 수 없습니다. 특히 다음 js 특수 효과.

2. 왜 부동 소수점이 필요합니까?

---

**요소 부동은 부동 속성이 설정된 것을 의미합니다. 것입니다:**

• 표준 흐름 제어에서 벗어납니다.
• 지정된 위치로 이동합니다.

기능:

• 여러 상자(div)를 가로로 연속 배열하도록 허용 정렬 등의 중요한 수단입니다.
• 플로팅은 이미지 주위에 텍스트 배치 효과를 얻기 위해
이미지를 제어
• 하는 데 처음 사용되었습니다.
플로팅 공식 - 플로팅

nbsp;html>


    <meta>
    <meta>
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rgba(255,0,0,0.5);
            float: left;
        }
        .box2{
            width: 300px;
            height: 150px;
            background-color: skyblue;
        }
    </style>


    <div></div>
    <div></div>

속성은 상자를 표준 흐름 위에 뜨게 하므로 두 번째 표준 흐름 상자는 부동 상자<span style="background-color: rgb(255, 192, 0);">float</span>의 아래쪽으로 실행됩니다. Floating 공식 - Leak

Float - 누출, 누출, 누출~~~ 부동 box는 원래 위치를 아래 표준으로 유출합니다. 흐름의 상자는 원래 위치를 차지하지 않으며 표준 흐름을 벗어났습니다. 우리는 일반적으로 이를 "표준 외"라고 부릅니다.

nbsp;html>


    <meta>
    <meta>
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rgba(255,0,0,0.5);
            /* 让第一个盒子浮动起来，不占位置 */
            float: left;
        }
        .box2{
            width: 300px;
            height: 150px;
            background-color: skyblue;
        }
    </style>


    <div></div>
    <div></div>

따라서 box2 아래의 상자는 실제로 아래로 실행되었습니다. box1이 box1에 의해 억제되어 차단되었습니다

Special

Float - float 속성은 요소의 표시 속성을 변경합니다.

요소 종류에 관계없이 모든 요소가 부동될 수 있습니다. 생성된 블록 수준 상자는 이전 인라인 블록과 매우 유사합니다.

div {
  width: 200px;
  height: 200px;
  background-color: pink;
  /* 转换为行内块元素，可以水平显示，不过 div 之间有间隙，不方便处理 */
  /* display: inline-block; */
  /* 设置浮动属性，可以让 div 水平排列，并且没有间隙 */
  float: left;
}

.two {
  background-color: hotpink;
}

플로팅 요소는 서로 가깝지만 상위 너비가 이러한 플로팅 상자를 수용할 수 없는 경우 추가 상자가 다른 줄에 배치됩니다. . 정렬

플로팅 확장

1. 플로팅 요소와 상위 상자 간의 관계

- 하위 상자의 플로팅 요소는 상위 상자와 정렬됩니다.

---

- 테두리와 겹치지 않습니다. 상위 상자의 패딩을 초과합니다.

2. 부동 요소와 형제 상자 간의 관계

부모 상자에서 **이전 형제 상자**가 다음과 같은 경우:

• 浮动的，那么当前盒子会与前一个盒子的顶部对齐；
• 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。

结论: 如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题

ps：浮动只会影响当前的或者后面的标准流的盒子，不会影响前面的标准流

建议：如果一个盒子里面有多个盒子，如果其中的一个盒子浮动了，其他兄弟也应该浮动。防止引起问题

三、为什么要清除浮动

---

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。 !

结论：

• 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
• 准确地说，并不是清除浮动，而是清除浮动后造成的影响

四、清除浮动本质

---

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。 清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。 父级有了高度，就不会影响下面的标准流了

五、清除浮动的四种方式

---

在CSS中，clear属性用于清除浮动

语法：

选择器{clear:属性值;}   //clear 清除

属性值	右描述
left	不允许左侧有浮动元素(清除左侧浮动的影响)
right	不允许右侧有浮动元素(清除右侧浮动的影响)
both	同时清除左右俩侧浮动的影响

但是我们实际工作中， 几乎只用 clear: both;

1.额外标签法(隔墙法)

<!-- 是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签:
  1.添加在浮动元素最后
  2.该元素必须是块元素，行内元素无效
 -->

<div></div>

• 优点：通俗易懂，书写方便
• 缺点：添加许多无意义的标签，结构化较差

2.父级添加overflow属性方法

可以给父级添加： overflow为 hidden| auto| scroll  都可以实现。

• 优点：代码简洁
• 缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

3.使用after伪元素清除浮动
after 方式为空元素额外标签法的升级版，好处是不用单独加标签了

.clearfix:after {  
  content: ""; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
}   

.clearfix {
  /* IE6、7 专有 */
  *zoom: 1;
}

• 优点：符合闭合浮动思想 结构语义化正确
• 缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

4.使用双伪元素清除浮动

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

• 优点：代码更简洁
• 缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

总结

• 标准流(普通流)在布局中 块级元素会独占一行，从上向下排列；行内元素会按照顺序，从左到右排列，碰到父元素边缘则自动换行。

• 浮动的应用场景大部分用于让盒子水平排列成一行和控制图片。

• 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

• 清除浮动一共有4中方式：

  • 额外标签法(隔墙法)

  • 父级添加overflow属性方法

  • 使用after伪元素清除浮动

  • 使用双伪元素清除浮动

（学习视频分享：web前端）

위 내용은 CSS 언어의 어떤 항목이 부동 구문인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!