html设置浮动

embedded/2025/3/17 22:29:34/
htmledit_views">

标准文档流

标准文档流:指元素根据块元素行内元素的特性按从上到下,从左到右的方式自然排列。这也是元素默认的排列方式

标准文档流组成

  1. 块级元素(block)

<h1>…<h6>、<p>、<div>、列表
  • 块级元素,顾名思义,该元素呈现“块”状,所以它有自己的宽度和高度,也就是可以自定义width和height,除此之外,块级元素比较霸道,它独自占据一行高度(float浮动除外),一般可以作为其他容器使用,可容纳块级元素和行内元素。块级元素有以下特点:

    • 每个块级元素都是独自占一行。

    • 元素的高度、宽度、行高和边距都是可以设置的。  

    • 元素的宽度如果不设置的话,默认为父元素的宽度(父元素宽度100%)。

  1. 内联(行内)元素(inline)

<span>、<a>、<img/>、<strong>...
  • 行内元素不可以设置宽(width)和高(height),但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制。行内元素有以下特点:

    • 每一个行内元素可以和别的行内元素共享一行,相邻的行内元素会排列在同一行里,直到一行排不下了,才会换行。

    • 行内元素的高度、宽度、顶部和底部边距不可设置。

    • 元素的宽度就是它包含的文字或图片的宽度,不可改变。

行内标签可以包含于块级标签中,成为它的子元素,而反过来则不成立

  1. 行内块级元素

  • 行内块级元素,它既具有块级元素的特点,也有行内元素的特点,它可以自由设置元素宽度和高度,也可以在一行中放置多个行内块级元素。比如input、img就是行内块级元素,它可以设置高宽以及一行多个。具体特点如下:

    • 和其他行内或行内块级元素元素放置在同一行上;

    • 元素的高度、宽度、行高以及顶和底边距都可设置。

display

说明
block块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符
inline内联元素的默认值。元素会被显示为内联元素,该元素前后没有换行符
inline-block行内块元素,元素既具有内联元素的特性,也具有块元素的特性
none设置元素不会被显示

display特性

块级元素与行级元素的转变(block、inline) 控制块元素排到一行(inline-block) 控制元素的显示和隐藏(none)

示例演示1

练习1-QQ会员页面导航

  • 需求说明 导航背景颜色为黑色半透明效果 鼠标移入“功能特权”等导航信息时文字颜色变为蓝色,无下划线 “登录”部分信息使用超链接实现,添加圆角边框,鼠标移入字体颜色加深,添加背景颜色为黄色

块元素排在一行的方法

  • 可以使用什么属性使块元素排在一行? inline-block float

float

浮动

属性值说明
left元素向左浮动
right元素向右浮动
none默认值。元素不浮动,并会显示在其文本中出现的位置

示例2,示例3,示例4

块级元素设置左浮动

  • 脱离原标准文档流,后面标签文档流全部往前走

  • 不会独点一行,宽度、高度由内容决定

练习2-热门活动

需求说明 热门活动页宽度为700px,在浏览器中居中显示 文字“更多”使用右浮动让它排列到右边 使用无序列表布局图片和文字说明 使用浮动让列表项排列在一行

练习3-电视剧详情列表

需求说明 标题前面图标使用背景图片,标题字体为12px,高度为27px,距离左边38px 中间部分使用浮动让图片和右边的文字描述排在一行 下面的列表项中的文字使用左浮动,作者描述使用右浮动 所有的超链接都没有下划线,鼠标移入有下划线

清除浮动

layer04设置宽度和右浮动后,为什么边框塌陷了?怎么解决?

  • 浮动元素脱离标准文档流

  • 清除浮动

clear属性

说明
left在左侧不允许浮动元素
right在右侧不允许浮动元素
both在左、右两侧不允许浮动元素
none默认值。允许浮动元素出现在两侧

示例5,清除浮动

解决父级边框塌陷

方法一

  • clear属性可以清除浮动对其他元素造成的影响,可是依然解决不了父级边框塌陷问题,怎么办?

    • 浮动元素后面加空div

<div id="father"><div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div><div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div><div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div><div class="layer04">浮动的盒子……</div><div class="clear"></div>
</div>
.clear{  clear: both;  margin: 0; padding: 0;}

存在问题:引入空的div

方法二

设置父元素的高度

<div id="father"><div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div><div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div><div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div><div class="layer04">浮动的盒子……</div>
</div>
#father {height: 400px; border:1px #000 solid; }

存在的问题:如果内容增加,无法包含

方法三

父级添加overflow属性

<div id="father"><div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div><div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div><div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div><div class="layer04">浮动的盒子……</div>
</div>
#father {overflow: hidden;border:1px #000 solid; }

overflow属性

属性值说明
visible默认值。内容不会被修剪,会呈现在盒子之外
hidden内容会被修剪,并且其余内容是不可见的
scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容

方法四

父级添加伪类after

<div id="father" class="clear"><div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div><div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div><div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div><div class="layer04">浮动的盒子……</div>
</div>
.clear:after{content: '';          /*在clear类后面添加内容为空*/display: block;      /*把添加的内容转化为块元素*/clear: both;         /*清除这个元素两边的浮动*/
}
​

小结

  • 清除浮动,防止父级边框塌陷的四种方法

    • 浮动元素后面加空div

      • 简单,空div会造成HTML代码冗余

    • 设置父元素的高度

      • 简单,元素固定高会降低扩展性

    • 父级添加overflow属性

      • 简单,下拉列表框的场景不能用

    • 父级添加伪类after

      • 写法比上面稍微复杂一点,但是没有副作用,推荐使用

练习4-京东登录页面

  • 训练要点 使用header、article、nav、footer等结构元素布局 使用float布局页面 使用background设置背景图像 使用padding和margin设置网页元素的内边距和外边距 使用clear属性清除浮动

  • 需求说明 页面宽度为990px,水平居中显示 头部logo图和文字“欢迎登录”,使用浮动和盒子模型进行排版 使用表单元素布局京东会员登录小窗口

  • 实现思路 中间主体部分的结构

<article class="content"><div class="wrap"><div class="login-box"><div class="login-form"><h2>京东会员<a href="">立即注册</a></h2><form action="" method="post" id="loginForm">……

中间部分背景全屏显示,内容部分宽度990px且居中显示,content层用来设置红色背景颜色,wrap层用来设置宽度990px居中显示,login-box层用来设置大图背景,login-form用来设置表单登录的位置、宽度等

inline-block和float的区别

inline-block和float的区别

  • display:inline-block 可以让元素排在一行,并且支持宽度和高度,代码实现起来方便 位置方向不可控制,会解析空格

  • float 可以让元素排在一行并且支持宽度和高度,可以决定排列方向 float 浮动以后元素脱离文档流,会对周围元素产生影响,必须在它的父级上添加清除浮动的样式


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

相关文章

c++介绍函数指针 十

指针代表内存中地址标识符&#xff0c;变量&#xff0c;数组都是存储内存中的数据。所以可以获得它们的地址&#xff0c;用指针来表示这块内存。 如图输出内存中的地址。 对于一个函数来说&#xff0c;也是内存中存储这段数据&#xff0c;所以我们也可以获取函数的地址。 函数…

FFmpeg处理流程

结构体 AVFormatContext 作用&#xff1a;管理媒体文件的封装格式上下文&#xff0c;存储文件格式、流信息、I/O 操作等元数据。 关键字段 AVInputFormat *iformat; // 输入格式&#xff08;如MP4、FLV&#xff09; AVStream **streams; // 音视频流数组 int nb_str…

AI 游戏的创新与挑战都有哪些?

一、AI 游戏的创新 &#xff08;一&#xff09;技术突破 AI 技术的不断进步为游戏产业带来了新的机遇。深度学习、强化学习等技术的应用&#xff0c;使得游戏中的 AI 角色能够展现出更加智能的行为和决策能力。例如&#xff0c;通过强化学习&#xff0c;AI 可以在游戏中自主学…

3ds Max 鼠标与快捷键组合操作指南

以下是 3ds Max 鼠标与快捷键组合操作指南&#xff0c;按功能分类整理&#xff0c;涵盖 视图控制、对象操作、建模工具 等核心场景。自用记录&#xff0c;不喜勿喷。 一、视图控制&#xff08;鼠标核心操作&#xff09; 操作快捷键鼠标动作功能说明平移视图鼠标中键拖动按住中…

PCDN 与边缘计算的结合​

在数字化时代&#xff0c;PCDN 与边缘计算作为两项前沿技术&#xff0c;正悄然改变着网络生态格局。PCDN&#xff0c;即点到点内容分发网络&#xff0c;它借助众多用户的闲置带宽与计算资源&#xff0c;构建起庞大的分布式网络&#xff0c;能有效提升内容传输效率。边缘计算则是…

涨薪技术|Kubernetes(k8s)之Pod生命周期(下)

上次推文我们学习了Pod生命周期&#xff08;上&#xff09;知识&#xff1a;相位、创建与终止、初始化容器&#xff0c;今天继续分享完余下的3个知识&#xff1a;钩子函数、容器探测、重启策略。 01钩子函数 钩子函数能够感知自身生命周期中的事件&#xff0c;并在相应的时刻…

谷歌手机LEA流程

谷歌手机LEA流程 连接管理首次连接手机回连 业务管理音乐业务通话业务 链路切换管理 本篇文章简单介绍了谷歌手机使用LE Audio连接TWS耳机中的实现细节&#xff0c;强调了持续广播机制、业务差异化处理、链路切换逻辑及加密安全性。核心目标是优化低功耗音频连接的稳定性和资源…

PyTorch 深度学习实战(11):强化学习与深度 Q 网络(DQN)

在之前的文章中&#xff0c;我们介绍了神经网络、卷积神经网络&#xff08;CNN&#xff09;、循环神经网络&#xff08;RNN&#xff09;、Transformer 等多种深度学习模型&#xff0c;并应用于图像分类、文本分类、时间序列预测等任务。本文将介绍强化学习的基本概念&#xff0…