前端面试热门问题--浮动和清除浮动(CSS)

简介: 前端面试热门问题--浮动和清除浮动(CSS)

前言

浮动作为CSS里一个基本的概念,但是在面试过程中,如果面试官问你有关于CSS方面的问题的话,那么浮动出现的概率非常大,今天我们就一起来把浮动搞清楚,面试碰到此类问题再也不用发愁了。

三大元素

在我们开始讲浮动之前,我先来给小伙伴们讲讲块级元素,行内元素,行内块级元素,以便大家更好的理解

块级元素:

  1. 默认占据一整行:块级元素在页面上占据一整行,它们会自动换行,每个块级元素从新的一行开始。
  2. 可以设置宽高:你可以为块级元素指定宽度和高度,以控制它们的尺寸和形状。

行内块元素:

  1. 可以同行显示:行内块元素可以在同一行上并排显示,它们不会强制换行,允许其他元素在同一行内显示。
  2. 可以设置宽高:与块级元素类似,行内块元素也可以设置宽度和高度,因此你可以控制它们的大小和形状。

行内元素:

  1. 可以同行显示:行内元素默认会在同一行上显示,它们不会强制换行,允许其他元素在同一行内显示。
  2. 不可以设置宽高:与块级元素和行内块元素不同,行内元素不允许直接设置宽度和高度。它们的大小通常由其内容的宽度和高度决定,但可以通过其他方式(例如paddingmargin)间接影响它们的尺寸。

浮动的概念与特性

  • 概念

浮动是CSS属性,用于控制元素在水平方向上的布局和定位。它使元素能够向左或向右浮动,并允许其他内容环绕它。通常用于创建文字环绕图像、多列布局和导航菜单等。例如,我们想使一个元素向左浮动:

.element {
    float: left;
}
  • 浮动特性
  1. 文字环绕
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img{
            width: 100px;
            height: 100px;
            background-color: red;
            /* float: left; */
        }
    </style>
</head>
<body>
    <div class="img"></div>
    <div class="text">在人生的每个阶段,我们都对漫漫前程抱着一份激动的希望,以为奇迹就在前方。
    然而,人生只是一个个梦想不断破灭的过程。
    而当我们走出所有曲折的日子时才发现,
    真正的美好与神奇,已经永远地留在了背后。</div>
</body>
</html>

这是效果

image.png

如果我们想将图像或其他元素放置在文本的旁边,可以在.img中加入float: left,这样就可以实现文字环绕的效果啦

image.png

  1. 让块级元素同行显示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            /* float: left; */
        } 
        .item1{
            background-color: red;
        }
        .item2{
            background-color: blueviolet;
        }
        .item3{
            background-color:greenyellow ;
        }
    </style>
</head>
<body>
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
</body>
</html>

因为div是块级元素,一个div元素占据一整行,所以,三个item分行显示 image.png

如果我们想要他们同行显示,可以在div容器里面加入 float: left,浮动可以让元素脱离文档流,这样就可以让他们同行显示啦

  • 文档流:决定了元素在页面中的位置和布局,  元素在文档流中垂直排列,即一个元素会在前一个元素下方。 当页面宽度不足以容纳块级元素时,它们会自动换行到下一行。当页面宽度不足以容纳块级元素时,它们会自动换行到下一行。

image.png

但是我们发现了一个问题

image.png

父容器body的高度变成0了!这里我们称之为父容器塌陷。

  1. 让行内元素可以设置宽高
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 100%;
            height: 200px;
            background-color: green;
        }
        span{
            width: 100px;
            height: 100px;
            /* float: left; */
            background: red;
            margin: 5px; /* 添加间距以使它们不紧密排列 */
        }
    </style>
</head>
<body>
    <div class="container">
        <span>来颗</span><span>奇趣蛋</span>
    </div>
</body>
</html>

上面我们介绍过了,span是行内元素,行内元素是不能设置宽高的,所以效果应该如下 image.png

如果我们想设置行内元素的宽高,可以在行内元素里面加入float: left,效果如下

image.png

  1. 可以使用margin 但是不能使用 margin: 0 auto;

如果我们想要使用margin: 0 auto将两个span居中,我们就不能使用float : left,这也是浮动元素的一个特性之一。将span设置为块级元素,使用margin: 0 auto

span{
            width: 100px;
            height: 100px;
            /* float: left; */
            margin: 0 auto;
            display: block;
            background: red;
        }

image.png

清除浮动

浮动在网页布局中是一个有用的工具,但它也可能引发一些不良影响,特别是在不正确使用时。就比如上述第二点,父容器高度塌陷,当我们在计算高度之类的问题时可能会出现问题。 清除浮动(Clearing Floats)是一种在使用CSS浮动布局时经常需要采用的技术,主要是为了解决由浮动元素可能引发的一些常见问题。

  • 防止父元素坍塌(Collapsing Parent) :当父元素包含浮动元素时,父元素可能会"坍塌",导致高度计算不准确。清除浮动可以确保父元素包含浮动元素,使其高度得以正确计算,而不塌陷。
  • 避免影响其他元素(Avoid Impact on Other Elements) :浮动元素可能会影响其他元素的布局,特别是文本环绕浮动元素时。清除浮动可以确保元素不受浮动元素的影响,使布局更可控。

这里我们有几个方法可以清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;padding: 0;
    }
    ul li{
      list-style: none;
      width: 200px;
      height: 100px;
      float: left;
    }
    li:nth-child(1) {
      background: #da8383;
    }
    li:nth-child(2) {
      background: #e1e941;
    }
    li:nth-child(3) {
      background: #6ceb50;
    }
    .text{
      width: 100px;
      height: 150px;
      background: #2d3bda;
    }
  </style>
</head>
<body>
  <div class="container">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <div class="text">Hello World</div>
  </div>
</body>
</html>

image.png

我们发现了这样一个问题,text原本的高度被ul li 浮动元素覆盖掉了,这样导致了我们的布局出现了问题,我们可以用下面几种方法来解决

  1. 给父容器设置高度

这个办法很简单,但是这样布局不会考虑用户观看时使用的屏幕大小,就比如用户用电脑看和手机看,页面都是一样大小。一般不使用这个办法。

  1. 在最后一个浮动元素之后添加新的元素,在新元素上做 清除浮动
    在最后一个浮动元素<li>3</li> 的后面添加新的元素,给新元素做clear: left ,若是右浮动,则clear: right,若两边浮动都有,则clear:both
//CSS
 .clear-float {
        clear: left; /* 清除浮动 */
}
<div class="container">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <div class="clear-float"></div>
    </ul>
  
    <div class="text">Hello World</div>
    
  
  </div>


image.png

但是如果使用浮动元素很多的情况下,要设置很多新的元素,代码会繁琐很多,一般不使用此方法

  1. 在下方被浮动影响的容器上做 清除浮动
.text{
      width: 100px;
      height: 150px;
      background: #2d3bda;
      clear: left;
    }

代码实现效果一样

image.png

一般也不使用此操作,每个容器都添加,也会十分繁琐

  1. 在父容器伪元素after上做 清除浮动
.clear::after{
      content: '';
      clear: both;
      display: block;
    }
    <div class="container">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <div class="clear"></div>
    </ul>
    <div class="text">Hello World</div>
    
    </div>

image.png

这个办法使用伪元素的特点,是一个好办法

  1. BFC

这也是一个很不错的方法,今天内容已经很多了,小伙伴消化一下,我们留着下次再介绍吧。

今天的内容就到这啦,如果你觉得小编写的还不错的话,或者对你有所启发,请给小编一个辛苦的赞吧

相关文章
|
15天前
|
前端开发 JavaScript C++
揭秘Web前端CSS引入秘籍:Link vs @import,你的选择决定页面加载速度,你选对了吗?
【8月更文挑战第26天】本文探讨了Web前端开发中CSS的引用方法,主要包括行内样式、内部样式表及外部样式表三种形式。重点对比了外部样式表中的`&lt;link&gt;`和`@import`两种引入方式。`&lt;link&gt;`作为HTML元素,在页面加载初期就开始加载样式资源,支持并行加载,对提高页面加载速度有益。而`@import`作为一种CSS规则,仅能在CSS文件中使用,其引入的样式表会在页面完成加载后才开始加载,可能导致渲染延迟且不支持并行加载。因此,在多数情况下,推荐采用`&lt;link&gt;`方式引入外部样式表,以确保更佳的性能表现和浏览器兼容性。
47 2
|
6天前
|
前端开发 程序员
CSS前端学习(online tuorials)
CSS前端学习(online tuorials)
12 5
|
15天前
|
编解码 前端开发 开发者
【前端设计达人必备】揭秘CSS尺寸单位的魔力:从基础到实战,打造灵动响应式网页!
【8月更文挑战第26天】本文深入探讨了CSS中常用的尺寸单位,包括像素(px)、百分比(%)、视窗单位(vw/vh/vmin/vmax)、可伸缩相对单位(em/rem)以及Flexbox和Grid中的fr单位。通过具体案例展示了每种单位的特点及其适用场景。像素适用于固定尺寸元素;百分比和em/rem利于构建响应式布局;视窗单位适合全屏设计;fr单位则能有效管理复杂网格布局的空间分配。掌握这些单位有助于开发者设计出更加灵活、高质量的网页布局。
34 4
|
15天前
|
前端开发 开发者
【前端大揭秘】CSS盒子模型的爱恨情仇:一场关于标准与IE模型的精彩对决!
【8月更文挑战第26天】本文深入探讨CSS中的两大盒子模型——标准盒模型与IE盒模型。通过理论解析与实例代码,清晰展示了两种模型下元素尺寸的构成方式及其应用场景。标准盒模型适合精确控制内容区尺寸,而IE盒模型在处理固定宽度元素时更为直观。掌握这些知识将帮助前端开发者在实际项目中做出更优的设计决策,提升网页布局的质量与美观性。
13 1
|
21天前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
23 2
|
19天前
|
前端开发 数据安全/隐私保护
探秘CSS类型选择器:解码前端设计的神秘密码!
探秘CSS类型选择器:解码前端设计的神秘密码!
探秘CSS类型选择器:解码前端设计的神秘密码!
|
21天前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
17 0
|
9天前
|
Java Spring 数据库
怎样动动手指就能实现数据操作?Spring Data JPA背后的魔法揭秘
【8月更文挑战第31天】在Java开发中,数据库交互至关重要。传统的JDBC操作繁琐且难维护,而Spring Data JPA作为集成JPA的数据访问层解决方案,提供了CRUD等通用操作接口,显著减少代码量。通过继承`JpaRepository`,开发者能轻松实现数据的增删改查,甚至复杂查询和分页也不再困难。本文将通过示例详细介绍如何利用Spring Data JPA简化数据访问层的开发,提升代码质量和可维护性。
18 0
|
18天前
|
前端开发 容器
解锁CSS定位奥秘,从迷茫到精通,让你的网页布局“稳如老狗”,引领前端新潮流!
【8月更文挑战第23天】本文深入探讨了Web前端开发中CSS定位的三大基石:相对定位、绝对定位与固定定位。通过具体示例,展示了各种定位方式的特点及应用场景。相对定位可在不影响布局的情况下微调元素位置;绝对定位使元素完全脱离文档流,适用于精确控制位置的需求;固定定位则确保元素始终固定于浏览器窗口特定位置,不受页面滚动影响。这些技巧对于实现复杂网页布局至关重要。
30 0
|
18天前
|
前端开发 数据安全/隐私保护 开发者
热门聚焦!Web 前端 CSS 选择器 —— 解锁精美网页的密码,触动开发者心灵深处!
【8月更文挑战第23天】CSS 选择器是 Web 前端设计中的关键工具,用于精准定位和美化页面元素。主要包括:直观的元素选择器(如 `p`),灵活的类选择器(如 `.my-class`),唯一的 ID 选择器(如 `#unique-div`),以及可根据属性选择的属性选择器(如 `a[title]`)。此外,后代选择器(如 `div p`)、子选择器(如 `ul &gt; li`)和相邻兄弟选择器(如 `h1 + p`)可用于更复杂的选择。通用选择器(如 `*`)则适用于所有元素。通过组合这些选择器,开发者能够创建出既复杂又美观的网页样式,提升用户体验。
26 0
下一篇
DDNS