CSS 学习笔记 - 浮动

男娘i 2022-12-06 12:55 189阅读 0赞

### CSS 学习笔记 - 定位 ###

*  浮动
 *   *  浮动类型
 *  清除浮动
 *   *  clear 属性
     *  after 伪类
     *  overflow 属性
     *  BFC块格式化上下文
 *  参考资料

# 浮动 #

{ 
    	float: left | right | none | inline-start | inline-end;
    }

*  设置浮动后元素`脱离文档流`，并变为`块级`元素。
 *  允许文本和内联元素环绕它。
 *  `left` | `rigth` 设置浮动元素在容器中的停靠方向 。
 *  同一浮动方向的元素可排列停靠（类似于在它们在一个单独的文档流中）。
 *  浮动边界在父元素的`padding`内

## 浮动类型 ##

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>left</td> 
   <td>向左浮动</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>向右浮动</td> 
  </tr> 
  <tr> 
   <td>none</td> 
   <td>不浮动</td> 
  </tr> 
  <tr> 
   <td>inline-start</td> 
   <td>向文字起始方向浮动</td> 
  </tr> 
  <tr> 
   <td>inline-end</td> 
   <td>向文字结束方向浮动</td> 
  </tr> 
 </tbody> 
</table>

# 清除浮动 #

## clear 属性 ##

[clear属性][clear]用于清除`元素`受`浮动元素`的影响。

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>不清除之前的影响</td> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td>清除之前的左浮动影响</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>清除之前的右浮动影响</td> 
  </tr> 
  <tr> 
   <td>both</td> 
   <td>清除之前的左右浮动影响</td> 
  </tr> 
 </tbody> 
</table>

## after 伪类 ##

*  原理：在末尾子元素后加一个不可见的元素，将其清除浮动，实现清除浮动以撑高父元素。
 *  通过伪类实现：添加一个元素。

.selector::after { 
        content: "";
        display: block;
        clear: both;
    }

## overflow 属性 ##

*  父元素设置 [overflow: hidden][overflow_ hidden] 属性可以[触发BFC机制][BFC]清除浮动。
 *  `overflow` 定义当一个元素的内容超出块级范围时如何处理。

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a title="默认值" rel="nofollow">visible</a></td> 
   <td>不裁剪，超出照常显示。</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td>超出隐藏</td> 
  </tr> 
  <tr> 
   <td>scroll</td> 
   <td>超出显示滚动条</td> 
  </tr> 
  <tr> 
   <td>auto</td> 
   <td>由浏览器决定，如果内容被修剪，就显示滚动条</td> 
  </tr> 
 </tbody> 
</table>

## [BFC块格式化上下文][BFC] ##

Block Formatting Context  
`overflow`设置非`visible`的值，父元素的高度计算会包括浮动元素的高度。

`浮动定位`与`清除浮动`取决于`BFC`，只应用于同一个`BFC`内的元素。外边距折叠（Margin collapsing）也只会发生在属于同一`BFC`的块级元素之间。

# 参考资料 #

[MDN：CSS 属性值定义语法][MDN_CSS]  
[MDN：CSS\_定位\_Positioning][MDN_CSS_Positioning]  
[后盾人：浮动布局][Link 1]

[clear]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear
[overflow_ hidden]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow
[BFC]: https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
[MDN_CSS]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax
[MDN_CSS_Positioning]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Positioning
[Link 1]: https://houdunren.gitee.io/note/css/8%20%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80.html