CSS(四)display和float

embedded/2024/12/28 1:17:02/

display

display 属性用于控制元素的显示类型,用的 display 值包括:

  • block:块级元素
    • 使元素成为块级元素,占据一整行,前后有换行
    • 宽度默认为父容器的 100%,可以设置宽高,支持 marginpaddingborder 等属性
    • 常见的块级元素<div>, <h1> - <h6>, <p>, <form>, <section>, <article>
  • inline:行内元素

    • 行内元素不会占据一整行,它只会占据内容所需的空间,元素之间没有换行。
    • 行内元素的特点是:不支持设置宽度和高度,不能使用 margin-topmargin-bottom
    • 常见的行内元素<span>, <a>, <strong>, <em>
  • inline-block:行内块级元素

     
    • blockinline 的结合体,它不换行,但可以设置宽度和高度,支持 marginpadding 等。
    • 常见用法:常用来让导航条的列表项水平排列,或者需要在一行中放置多个块元素

例如:

css">ul {list-style: none;margin: 0;padding: 0;
}li {display: inline-block;margin-right: 10px;
}

以上代码会让导航栏中的 li 元素排成一行

Float

浮动是将元素从正常的文档流中脱离出来,其他元素(比如文本)将围绕其周围排布,通常用于实现网页的布局效果

float 的属性包括

  • left:元素浮动到容器的左侧,其他元素会围绕在其右侧
  • right:元素浮动到容器的右侧,其他元素会围绕在其左侧
  • none:默认值,元素不会浮动,保持在正常文档流中

例如:

css">img {float: left; /* 将图片浮动到左侧 */margin-right: 10px; /* 给图片右侧添加间距 */
}

这段代码让图片浮动到左侧,文字将会围绕着图片排布

父级边框塌陷问题

当使用 float 来布局元素时,浮动的元素脱离了正常的文档流,其他元素会忽略浮动元素的存在,直接排布在它们的旁边

假设有一个浮动的div元素:

<div class="container"><div class="float-item">浮动元素</div><div class="normal-item">普通元素</div>
</div>

其对应的css为: 

css">.container {border: 1px solid #000;
}.float-item {float: left;width: 50%;background-color: #f0f0f0;
}.normal-item {background-color: #ccc;
}

在这个例子中,float-item 会浮动到容器的左边,而 normal-item 会在其旁边显示。但是,.container 元素不会自动扩展以包含 .float-item,因为 .float-item 脱离了正常的文档流。结果,.container 元素的高度可能为 0,导致外观上看不到边框,这就是父级边框塌陷问题

增加父级元素高度(不建议)

为了解决父级边框塌陷问题,我们可以选择直接为父级元素设置足够的高度,使浮动的子元素能够包含在内。例如直接将父容器设置为height:300px; 但是,这种方法无法动态适应子元素的高度,如果浮动的子元素内容发生变化,则需要手动调整父元素的高度。

使用空div标签

在父容器的最后插入一个空的清除浮动元素 div,并通过 CSS 设置其 clear: both; 来清除浮动。这样可以确保父容器的高度扩展到浮动元素的高度。

clear:清除浮动,可以让块既有浮动的效果,也排成标准文档流的样式

  • right:右侧不允许有浮动
  • left:左侧不允许有浮动
  • both:两侧都不允许有浮动

例如:

<div id="father"><div class="child">浮动元素1</div><div class="child">浮动元素2</div><div class="clear"></div> <!-- 清除浮动 -->
</div>
css">.clear {clear: both;margin: 0;padding: 0;
}

这种方法通过插入一个额外的空 div 来清除浮动。缺点是每次都需要手动插入比较麻烦。

使用 overflow 属性

通过在父容器上使用 overflow 属性,可以解决父容器塌陷的问题。设置 overflow 的值为 hiddenauto 会迫使父容器扩展到包含所有浮动子元素的大小,从而避免塌陷。

css">#father {overflow: hidden;
}

overflow 的值:

  • hidden:溢出的部分会被隐藏。如果容器内的浮动元素超出容器范围,这些部分会被裁剪掉,不显示。
  • scroll:如果容器内的内容超出容器范围,会出现滚动条,用户可以通过滚动查看超出的内容。
  • auto:如果内容超出容器的范围,则会自动显示滚动条。

overflow: hidden; 虽然能够解决父容器塌陷问题,但它会裁剪掉溢出部分的内容。因此,这种方法适用于容器内内容不会超出父容器的场景

使用 ::after 伪类

通过为父容器添加 ::after 伪元素,相当于在父类后面添加了一个宽、高都为0的小块,该小块不允许周围有浮动,逻辑和添加div标签差不多

清除的方法:

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

  • content: "":创建一个空的伪元素
  • display: block:确保伪元素是块级元素,能够触发清除浮动的效果。
  • clear: both:清除左右浮动,使得父容器能够包裹所有浮动元素

http://www.ppmy.cn/embedded/149314.html

相关文章

设计模式详解(建造者模式)

1、简述 建造者模式&#xff08;Builder Pattern&#xff09;是一种创建型设计模式&#xff0c;它通过将对象的构造过程与表示分离&#xff0c;使得相同的构造过程可以创建不同的表示。建造者模式尤其适用于创建复杂对象的场景。 2、什么是建造者模式&#xff1f; 建造者模式…

【网络云计算】2024第52周-每日【2024/12/23】小测-理论实操

文章目录 1、写5个if和系统管理相关的控制语句&#xff0c;不能低于5行&#xff0c;且是运维SRE必备的实用脚本&#xff0c;回答分为理论和实操两部分&#xff0c;理论写核心的实现思路&#xff0c;实操录屏和写文档&#xff0c;写脚本的具体实现2、基于eNSP做一个交换机的实验…

免费线上签字小程序,开启便捷电子签名

虽如今数字化飞速发展的时代&#xff0c;但线上签名小程序的开发制作却并非易事。需要攻克诸多技术难题&#xff0c;例如确保签名的真实性与唯一性&#xff0c;防止签名被伪造或篡改。 要精准地捕捉用户手写签名的笔迹特征&#xff0c;无论是笔画的粗细、轻重&#xff0c;还是…

Java中三大构建工具的发展历程(Ant、Maven和Gradle)

&#x1f438; 背景 我们要写一个Java程序&#xff0c;一般的步骤是编译&#xff0c;测试&#xff0c;打包。 这个构建的过程&#xff0c;如果文件比较少&#xff0c;我们可以手动使用java, javac,jar命令去做这些事情。但当工程越来越大&#xff0c;文件越来越多&#xff0c…

springboot489基于springboot的七彩云南文化旅游网站的设计与实现(论文+源码)_kaic

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装七彩云南文化旅游网站软件来发挥其高效地信息处理的作用&am…

mybatis/mybatisplus

一、mybatis 1.什么是 持久化框架。通过XML或注解的方式将实体类和SQL语句进行映射&#xff0c;开发者快速进行CRUD操作。 2.核心组件 (1)SqlSessionFactory 创建SqlSession实例。用于执行SQL操作 。代码 String resource "org/mybatis/example/mybatis-config.xml&q…

Redis分片集群+MQ处理高并发

Redis的三大集群模式&#xff1a;主从复制、哨兵模式和Cluster模式。每种模式都有其特点和应用场景&#xff0c;具体如下&#xff1a; 主从复制模式&#xff1a;适用于数据备份和读写分离场景&#xff0c;配置简单&#xff0c;但在主节点故障时需要手动切换。哨兵模式&#xff…

查看mysql编译参数

cat /usr/local/mysql/bin/mysqlbug|grep configure This is set by configure CONFIGURE_LINE“./configure ‘–prefix/usr/local/mysql’ ‘–localstatedir/var/lib/mysql’ ‘–with-commentSource’ ‘–with-server-suffix-Linuxtone’ ‘–with-mysqld-usermysql’ ‘…