【CSS】浮动布局

这篇具有很好参考价值的文章主要介绍了【CSS】浮动布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

浮动的设计初衷

float: left/right/both;

浮动是网页布局最古老的方式。

浮动一开始并不是为了网页布局而设计,它的初衷是将一个元素拉到一侧,这样文档流就能够包围它

常见的用途是文本环绕图片:

【CSS】浮动布局,CSS,css,前端

浮动元素会被移出正常文档流,并被拉到容器边缘

清除浮动的原因及方法

浮动元素的高度不会追加到父元素上

如果浮动的元素比容器高,那么就可能发生容器折叠现象:

【CSS】浮动布局,CSS,css,前端

这时,我们就需要清除浮动。

清除浮动不太优雅的方式:在容器末尾添加一个空 div,设置 clear: both,清除两边浮动,使得容器会向下扩展包含它。

<div style="clear: both;"></div>

既然是添加一个 div 元素,不如使用伪元素 ::after 来实现。

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

这个 clearfix 类是添加到包含浮动元素的元素上,而不是浮动元素本身。

使用 display: block 的原因:默认情况下,伪元素是内联元素,而不是块级元素。为了确保伪元素占据一整行并且在浮动元素之后换行,我们需要将其设置为块级元素。更重要的是,clear 属性只对块级元素生效。

设置 content: " " 的原因:解决一些旧版浏览器的 Bug。


清除浮动后的另一个问题:浮动元素的外边距不会折叠到清除浮动后的容器外部,但是非浮动元素会

对此,解决该问题的clearfix的修改版如下:

.clearfix::after,
.clearfix::before{
    display: table;
    content: " ";
}

.clearfix::after{
    clear: both;
}

为什么使用 display:table 而不是 display: block :外边距无法通过单元格元素折叠。


浮动陷阱:浏览器会将浮动元素尽可能地放在靠上的地方

如果众多的浮动元素高度不一致,最后导致布局会千变万化。哪怕是 1px 的高度差距也会导致浮动陷阱。

解决方法:给每一行的第一个元素清除左浮动

假设每行有 m 个元素:

.floatElement::nth-child(mn+1){
	clear: left
}

浮动布局示例解析:古诗欣赏

初始源代码如下:

index.html

<div class="container">
	<header>
		<h1>古诗欣赏</h1>
	</header>
	<main class="main clearfix">
		<h3>五言绝句</h3>
		<div>
			<div class="media">
				<img class="media-image" src="相思.png">
				<div class="media-body">
					<h4>相思·王维</h4>
					<p>
						红豆生南国,春来发几枝。
						愿君多采撷,此物最相思。
					</p>
				</div>
			</div>
			<div class="media">
				<img class="media-image" src="听筝.png">
				<div class="media-body">
					<h4>听筝·李端</h4>
					<p>
						鸣筝金粟柱,素手玉房前。
						欲得周郎顾,时时误拂弦。
					</p>
				</div>
			</div>
			<div class="media">
				<img class="media-image" src="江雪.png">
				<div class="media-body">
					<h4>江雪·柳宗元</h4>
					<p>
						千山鸟飞绝,万径人踪灭。
						孤舟蓑笠翁,独钓寒江雪。
					</p>
				</div>
			</div>
			<div class="media">
				<img class="media-image" src="春晓.png">
				<div class="media-body">
					<h4>春晓·孟浩然</h4>
					<p>
						春眠不觉晓,处处闻啼鸟。
						夜来风雨声,花落知多少。
					</p>
				</div>
			</div>
		</div>
	</main>
</div>

style.css

:root {
    box-sizing: border-box; /* 修改盒模型 */
}

*,
::before,
::after {
    box-sizing: inherit; /* 继承 box-sizing */
}

body {
    background-color: aliceblue;
    font-family: Arial, Helvetica, sans-serif;
}

/* 猫头鹰选择器 */

body * + *{
    margin-top: 1.5em;
}

header{
    padding: 1em 2em;
    background-color: antiquewhite;
    border-radius: .5em;
    margin-bottom: 2em;
}

.main{
    padding: 0 1.5em;
    background-color: white;
    border-radius: .5em;
}

.container{
    max-width: 800px; /* 自动适配宽度 */
    margin: 0 auto; /* 双容器模式 水平居中 */
}

.media{
    float: left;
    margin: 0 1.5em 1.5em 0; /* 重置 margin */
    width: calc(50% - 1.5em); /* 从宽度里减去 1.5em */
    padding: 1.5em;
    background-color:rgb(238, 245, 247);
    border-radius: .5em;
}

.media-image{
    width: 60px;
    height: 60px;
}

/* 清除浮动 */

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

/* 清除浮动修改版 */

.clearfix::after,
.clearfix::before{
    display: table;
    content: " ";
}

.clearfix::after{
    clear: both;
}

/* 解决浮动陷阱 */

.media:nth-child(odd){
    clear: left;
}

效果图:

【CSS】浮动布局,CSS,css,前端

实现图片被文字环绕

.media-image{
    width: 100px;
    height: 100px;
    float: left; /* 左浮动 */
}

.media-body{
    margin-top: 0; /* 覆盖猫头鹰选择器 */
}

.media-body h4{
    margin-top: 0; /* 覆盖用户代理样式表 */
}

效果:

【CSS】浮动布局,CSS,css,前端

实现图片在左文字在右

【CSS】浮动布局,CSS,css,前端

如上,图片被包含在了相邻的同级元素 media-body 中。

如果想实现图片在左文字在右,可以为文字创建一个块级格式上下文(block formatting context,BFC)。

BFC 将内部与外部隔绝开,内外互不影响。

创建 BFC 的方式:

  1. float 不为 none。
  2. overflow 不为 visible。
  3. display 为 inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid。
  4. position 为 absolute 或 fixed。

网页的根元素就是一个顶级的 BFC。

CSS 修改如下:

.media-image{
    width: 60px;
    height: 60px;
    float: left;
    margin-right: 1.5em; /* 图片与文字间增加一定间距 */
}

.media-body{
    margin-top: 0; /* 覆盖猫头鹰选择器 */
    overflow: auto; /* 创建 BFC */
}

效果图:

【CSS】浮动布局,CSS,css,前端

注意:使用浮动或 display: inline-block创建BFC的元素的宽度会变为 100%

基于浮动实现网格系统

【CSS】浮动布局,CSS,css,前端

大部分的 CSS 框架都实现了自己的网格系统:在一个行容器内放置若干列容器,列的宽度由列容器的类决定

<div class="row">
	<div class="column-1"></div>
	<div class="column-1"></div>
	<div class="column-1"></div>
	<div class="column-1"></div>
	<div class="column-1"></div>
	<div class="column-1"></div>
	<div class="column-3"></div>
	<div class="column-3"></div>
</div>

使用网格系统可以提高代码的可复用性。

网格系统不参与行列元素的视觉样式,只负责设置宽度和定位。在行列内的元素就不必再考虑宽度和定位了。

/* 网格系统 */

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

[class*="column-"]{
    float: left;
    padding: 0 0.75em; /* 左右设置内边距 */
    margin-top: 0; /* 去掉顶部外边距 */
}

.column-1{
    width: 8.333%;
}
.column-2{
    width: 16.6667%;
}
.column-3{
    width: 25%;
}
.column-4{
    width: 33.3333%;
}
.column-5{
    width: 41.6667%;
}
.column-6{
    width: 50%;
}
.column-7{
    width: 58.333%;
}
.column-8{
    width: 66.6667%;
}
.column-9{
    width: 75%;
}
.column-10{
    width: 83.333%;
}
.column-11{
    width: 91.6667%;
}
.column-12{
    width:100%;
}

完整 CSS:

:root {
    box-sizing: border-box; /* 修改盒模型 */
}

*,
::before,
::after {
    box-sizing: inherit; /* 继承 box-sizing */
}

body {
    background-color: aliceblue;
    font-family: Arial, Helvetica, sans-serif;
}

/* 猫头鹰选择器 */

body * + *{
    margin-top: 1.5em;
}

header{
    padding: 1em 2em;
    background-color: antiquewhite;
    border-radius: .5em;
    margin-bottom: 2em;
}

.main{
    padding: 0 1.5em 1.5em;
    background-color: white;
    border-radius: .5em;
}

.container{
    max-width: 800px; /* 自动适配宽度 */
    margin: 0 auto; /* 双容器模式 水平居中 */
}

/* 媒体对象的样式 */

.media{
    padding: 1.5em;
    background-color:rgb(238, 245, 247);
    border-radius: .5em;
}

.media-image{
    width: 60px;
    height: 60px;
    float: left;
    margin-right: 1.5em;
}

.media-body{
    margin-top: 0; /* 覆盖猫头鹰选择器 */
    overflow: auto; /* 创建 BFC */
}

.media-body h4{
    margin-top: 0; /* 覆盖用户代理样式表 */
}

/* 清除浮动 */

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

/* 清除浮动修改版 */

.clearfix::after,
.clearfix::before{
    display: table;
    content: " ";
}

.clearfix::after{
    clear: both;
}

/* 网格系统 */

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

[class*="column-"]{
    float: left;
    padding: 0 0.75em; /* 左右设置内边距 */
    margin-top: 0; /* 去掉顶部外边距 */
}

.column-1{
    width: 8.333%;
}
.column-2{
    width: 16.6667%;
}
.column-3{
    width: 25%;
}
.column-4{
    width: 33.3333%;
}
.column-5{
    width: 41.6667%;
}
.column-6{
    width: 50%;
}
.column-7{
    width: 58.333%;
}
.column-8{
    width: 66.6667%;
}
.column-9{
    width: 75%;
}
.column-10{
    width: 83.333%;
}
.column-11{
    width: 91.6667%;
}
.column-12{
    width:100%;
}

效果图如下:

【CSS】浮动布局,CSS,css,前端

与前面的相比,这个导致了内容出现了错位,没有对齐标题。

使用负 margin 拉伸行元素解决该问题:

/* 网格系统 */

.row{
    margin-left: -0.75em;
    margin-right: -0.75em;
}

...
...

效果图:

【CSS】浮动布局,CSS,css,前端

最终代码。文章来源地址https://www.toymoban.com/news/detail-733293.html

到了这里,关于【CSS】浮动布局的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS笔记(黑马程序员pink老师前端)浮动,清除浮动

    浮动可以改变标签的默认排列方式。浮动元素常与标准流的父元素搭配使用. 网页布局第一准则 :多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。 float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 1.浮动元素

    2024年02月09日
    浏览(52)
  • 前端学习笔记:CSS中浮动的原理,定位

    这是本人学习的总结,主要学习资料如下 马士兵教育 float设计的初衷是为了有文字环绕图片的效果,比如下图。 所以有浮动效果的元素一定不会遮挡其他元素的文字。比如有两个 div ,两个 div 都有文字,正常文字在 div 左上角。 我们设置一个浮动一个不浮动,我们会看到浮

    2024年02月03日
    浏览(53)
  • css:九宫格布局的五种方法(grid布局、flex布局、table布局、float浮动定位、inline-block+letter-spacing属性)

    要实现的九宫格效果图如下: 公共样式: 1.grid网格布局 grid-template-columns 用于定义每一列的宽度; grid-template-rows 用于定义每一行的高度;grid-gap设置网格的行间距、列间距 2.flex布局 计算好每个li的宽度和高度,总的宽、高度为300px,那么每个li的宽高就为300px/3=100px 但是由于

    2024年02月11日
    浏览(55)
  • 3-web前端 css 网页样式语言,基础语言、盒子模型、浮动

    html和css的关系:   HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。它负责定义网页的结构和内容。HTML使用各种标签来包含文本、链接、图 片、视频等元素,并可以与如JavaScript等其他技术结合使用,实现网页的动态功能。   CSS (Cascading S

    2024年02月08日
    浏览(65)
  • 【CSS 10】浮动实例 处理布局流 display: inline-block 行内块元素 水平显示列表项 align 对齐

    浮动实例 网格/等宽的框 通过使用 float 属性,可以轻松地并排浮动内容框 display: inline-block 与 display: inline 相比,主要区别在于 display: inline-block 允许在元素上设置宽度和高度 同样,如果设置了 display: inline-block,将保留上下外边距/内边距,而 display: inline 则不会 与 display: b

    2024年02月11日
    浏览(54)
  • 【前端|CSS系列第4篇】CSS布局之网格布局

    最近在做的一个项目前台首页有一个展示词条的功能,每一个词条都以一个固定大小的词条卡片进行展示,要将所有的词条卡片展示出来,大概是下面这种布局 每一行的卡片数目会随着屏幕大小自动变化,并且希望整个卡片区域周围不要有太大的留白,可是由于本人css学的并

    2024年02月16日
    浏览(40)
  • Dreamweaver网页作业——紫罗兰永恒花园动漫价绍网页 7页,含有table表格,js表单验证还有首页视频。以及列表页。浮动布局。div+css+js

    HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页

    2024年02月03日
    浏览(39)
  • 前端知识——css 之 flex 布局

    🔥🔥🔥更多知识,欢迎访问我的个人博客:Nan-ying’s Blog 长久以来,CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning 。 但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举。 一些布局上的痛点无法解决: 比如在父内容里面垂直居

    2024年02月07日
    浏览(54)
  • 【前端】CSS-Grid网格布局

    grid布局:网络布局,是目前唯一一种CSS二维布局方式,一种新的CSS布局模型,由纵横相交的两组网络线形成的框架性布局结构,能够同时处理行与列。号称是最强大的CSS布局方案。 擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系 Grid布局是

    2024年02月09日
    浏览(37)
  • 前端学习——css盒子模型、css3新特性、伪类、布局0711TODO

    样式还是得具体使用才能理解,不然会忘记也理解不透彻;还有定位,元素溢出,浮动,布局水平垂直对齐: css3新特性 1过渡 2 动画 3 2D、3D转换 伪类 三种定位方式 弹性布局/栅格布局

    2024年02月15日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包