# CSS浮动学习笔记

发布时间：2024-12-07 20:41:11

CSS浮动学习笔记


什么是CSS浮动？



CSS浮动（float）最初用于实现“文字环绕图片”的效果。
可用于实现基本的网页布局，但需要配合清除浮动技术。


浮动的特性



float 属性：使元素脱离标准文档流，向左或向右浮动。
属性值：
left：元素向左浮动。
right：元素向右浮动。
none：元素不浮动（默认值）。


示例代码：


img {
    float: left;
    margin-right: 10px;
}


特性说明：



浮动元素脱离标准文档流。
后续的内容会围绕浮动元素排列。
浮动元素不能垂直浮动。
对块级元素设置浮动会导致宽度自适应。
行内元素浮动会变为块级元素。




清除浮动


由于浮动元素脱离了标准文档流，可能会导致父元素高度塌陷。因此，需要使用清除浮动技术。


清除浮动的常用方法


方法1：使用clear属性


.clearfix {
    clear: both;
}


方法2：使用伪元素::after


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


方法3：父元素设置overflow: hidden


.container {
    overflow: hidden;
}




BFC（块级格式化上下文）


BFC（Block Formatting Context）是一种CSS布局机制，用于解决浮动引起的高度塌陷等问题。


触发BFC的方式：



float值不为none
overflow值不为visible
position值为absolute或fixed
display: flex或grid


BFC的特性：



内部元素不会影响外部元素。
可以阻止外边距重叠。
可以清除浮动。


示例代码：


.container {
    overflow: hidden;
}




浮动布局示例


基本的两列布局


<div class="container">
    <div class="sidebar" style="float: left; width: 30%;">侧边栏</div>
    <div class="content" style="float: right; width: 70%;">主要内容</div>
</div>


三列布局


<div class="container">
    <div class="left" style="float: left; width: 20%;">左侧</div>
    <div class="center" style="float: left; width: 60%;">中间</div>
    <div class="right" style="float: right; width: 20%;">右侧</div>
</div>




总结



CSS浮动用于实现简单的图文环绕与布局效果。
浮动元素会脱离标准文档流，可能导致父元素高度塌陷。
解决高度塌陷的方法包括：clear属性、伪元素清除法和BFC。

评论数：0