css-浮动，定位，溢出处理

原创

已于 2023-03-18 22:22:46 修改 · 408 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3 #vue.js

于 2023-03-18 20:14:06 首次发布

本文介绍了CSS中的浮动特性，包括左浮动和右浮动，以及如何清除浮动影响。讨论了浮动元素导致的高度塌陷问题，并提出了BFC（块级格式化上下文）解决方案，如使用`overflow: hidden`。接着，文章探讨了CSS的溢出处理，如`hidden`、`scroll`和`auto`。此外，还详细讲解了相对定位和绝对定位的区别，以及`z-index`在定位层级中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浮动：float
默认块级元素在文档流是占据一行从上往下排的
如果元素开启了浮动该元素就会脱离文档流,
会往左上角或者右上角漂,直到碰到父元素的边界停止或者碰到文档流内的兄弟元素也会停止
元素浮动以后不会在有块级元素和行内元素区分了
左浮动：float: left;
右浮动：float: right;
div脱离文档流以后下面元素会跑到当前元素地下，但是文字不会跑到底下
浮动最早出来的目的是做文字惊醒环绕效果

/* 清除左浮动 */
/* clear: left; */
/* 清除右浮动 */
/* clear: right; */
/* 清除前面所有浮动对我产生的影响元素 */
/* clear: both; */

浮动高度塌陷问题：
/* 1.第一种方案直接给外面的div加一个高度但是很少用 */
/* height: 100px; */
/* 2.第二种方案给当前元素开启BFC */
overflow: hidden;
/* 终极解决方案 */
.clearfix::after{
content: "";
clear: both;
display: block;
}