菜鸟入门第五天——CSS浮动

我是个演员
302 阅读7分钟

前言

今天我将带领兄弟们学习CSS浮动效果，在进入主题之前，我们先回顾一下JS元素布局类型，它们分别是块级元素、行内块元素和行内元素。

块级元素

块级元素是HTML文档中的一种元素类型。块级元素的主要特点包括：

1.独占一行：块级元素通常会占据整个可用的水平空间，每个块级元素都独自占据一行，因此它们会在页面上垂直堆叠。

2.可以设置宽高：块级元素可以通过CSS设置其宽度（width）和高度（height），从而控制其尺寸。

3.默认情况下，会换行：块级元素在默认情况下会自动换行，即一个块级元素下面会显示另一个块级元素，它们不会出现在同一行。

一些常见的块级元素包括：<div>,<p>,<h1>,<h2>,<ul>,<ol>,<table>,<form>

行内块元素

行内块元素是HTML和CSS中的一种元素类型。它具有一些特点介于块级元素和行内元素之间。行内块元素的主要特点包括：

1.可以同行显示：行内块元素可以在同一行上并排显示，而不会像块级元素那样每个元素占据一整行。

2.可以设置宽高：与行内元素不同，行内块元素可以通过CSS设置它们的宽度（width）和高度（height），这使得它们可以更灵活地控制尺寸。

3.可以包含其他元素：与行内元素相比，行内块元素可以包含其他块级元素或行内元素，而不会打破文档结构。

4.默认情况下，不会换行：行内块元素在默认情况下不会强制换行，它们会尽量在同一行上显示，直到占据行的宽度不够。

一些常见的行内块元素包括：<span>,<img>,<button>,<input>

行内元素

行内元素是HTML文档中的一种元素类型。行内元素的主要特点包括：

1.不会自动换行： 行内元素不会导致文本自动换行，它们会在同一行内水平排列，直到行内容器（通常是块级元素）不再能容纳它们。

2.只占据所需空间： 行内元素通常只占据其内容所需的水平空间，而不会占据整个行的宽度。它们的宽度由内容的大小决定。

3.允许嵌套： 行内元素可以嵌套在其他行内元素内部，形成嵌套结构。

一些常见的行内元素包括：<a>,<strong>,<img>,<em>,<span>

浮动元素

下面开始本章的重点了：浮动元素

我们先来看看浮动元素有什么特点吧：

1.脱离文档流：浮动元素脱离了正常的文档流，不再按照普通元素的顺序排列，而是可以自由定位，这可以用来创建多栏布局等效果。

2.文字环绕：浮动元素通常用于实现文字环绕效果，使文本围绕浮动元素排列，而不会遮挡浮动元素的内容。

3.让块级元素同行显示：浮动元素可以使块级元素在同一行上显示，而不会独占一行，从而实现多列布局。

4.让行内元素可以设置宽高：浮动元素使得行内元素可以像块级元素一样设置宽度和高度，这通常是行内块元素的应用场景。

5.可以使用margin但不能使用margin: 0 auto：浮动元素可以使用margin属性来设置外边距，但由于脱离文档流，不能使用margin: 0 auto来水平居中浮动元素，通常需要采用其他方法来实现水平居中。

现在给大家看个例子

这个是没加浮动效果的

        div{
            width: 100px;
            height: 100px;
        }
        .item1{
            background-color: red;
        }
        .item2{
            background-color: yellow;
        }
        .item3{
            background-color: blue;
        }

    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>

image.png

这个是加了浮动效果的

    div{
            width: 100px;
            height: 100px;
            float: left;
        }
        .item1{
            background-color: red;
        }
        .item2{
            background-color: yellow;
        }
        .item3{
            background-color: blue;
        }

    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>

image.png

清除浮动

1. 给父容器设置高度

一种最简单的清除浮动的方法是为包含浮动元素的父容器设置明确的高度。这样可以确保父容器的高度与浮动元素的高度相匹配，从而避免高度坍塌的问题。但这种方法的缺点是，如果浮动元素的高度变化，就需要手动调整父容器的高度，不太灵活。

2. 在最后一个浮动元素之后添加新的元素，然后在新的元素上做清除浮动

另一种常见的清除浮动方法是在最后一个浮动元素之后添加一个空元素（通常是<div style="clear: both;"></div>），然后为这个新元素设置清除浮动的样式。这将强制新元素出现在浮动元素的下方，从而避免浮动元素对后续内容的影响。

.clear-float{
    clear: left;/*清除左浮动*/
}

<div class="container">
  <div class="float-left">浮动元素</div>
  <div class="clear-float"></div> <!-- 清除浮动 -->
</div>

3. 在容器伪元素after上做清除浮动

使用伪元素在容器内部进行清除浮动是一种更现代和语义化的方法。通过为容器添加:after伪元素并应用clear: both样式，可以有效地清除浮动，而无需额外的空元素。

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

4. 在下方被浮动影响的容器上做清除浮动

另一种清除浮动的方法是在受到浮动元素影响的容器底部应用clear: both样式。这将确保容器的下方不受浮动元素的影响。

.clear-container {
      clear: both;
}

5. 使用BFC

BFC（块级格式化上下文）是一种更综合且强大的方式来处理浮动元素和清除浮动。一个元素成为BFC后，它会形成一个独立的上下文，从而解决浮动元素引起的问题。要创建BFC，可以应用overflow: hidden;、float: left;、display: inline-block; 等属性，或者使用伪元素来清除浮动。

.bfc-container {
      overflow: hidden; /* 创建BFC */
}

BFC

BFC，全称块级格式化上下文，是CSS中的一个概念，用于定义块级元素如何在页面上进行布局和排列。

1.垂直方向排列：BFC内的元素按照垂直方向一个接一个地排列，不会发生重叠。这有助于防止元素之间的重叠布局问题。

2.内部元素不会影响外部元素：BFC内的元素不会影响BFC外部元素的布局，这意味着BFC内的浮动元素、外边距、边框等属性不会溢出到BFC外部。

3.可以阻止外边距折叠：BFC可以阻止相邻元素的外边距折叠，确保它们之间的间距按照规则显示。

4.可以包含浮动元素：BFC可以包含浮动元素，防止浮动元素引起的高度坍塌问题。这使得创建自适应布局更容易。

以下是常用的BFC容器：

  1. float: left || right
  2. position: absolute || fixed
  3. display: inline-block
  4. display: table-cell ....（表格布局）
  5. overflow: hidden || auto || overly（覆盖） || scroll（滚动）
  6. 弹性盒子（display：flex || inline-flex）

总结

总的来说，浮动是一种强大的CSS布局属性，可用于创建多种吸引人的网页布局效果。然而，它也伴随着一些问题（如高度塌陷、清除浮动等问题）。但随着CSS技术的不断发展，设计师和开发者可以更智能地选择何时使用浮动，何时使用现代布局技术，以实现更好的网页设计。希望本篇文章对你能有所帮助。

avatar
文章
阅读
粉丝