CSS学习第14天——浮动

最新推荐文章于 2024-07-09 09:39:15 发布
最新推荐文章于 2024-07-09 09:39:15 发布
阅读量153 收藏
点赞数
文章标签： css 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65051363/article/details/126302073
版权
本文介绍了CSS中的浮动属性，包括元素如何向左和向右浮动，浮动如何导致文档流的变化，以及浮动如何消除元素间隙，实现水平摆放的效果。
摘要由CSDN通过智能技术生成

在 CSS 中，我们通过 float 属性实现元素的浮动。浮动以后使元素脱离了文档流，且浮动只有左右浮动，没有上下浮动。

1.元素向左浮动

脱离文档流之后元素相当于在页面上增加了一个浮层来放置内容，此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象。

 

上图为未脱离文档流的图片

 

 

图中为box1实现了脱离文档流

2.元素向右浮动

 

最低0.47元/天 解锁文章
m0_65051363
关注
CSS——浅谈浮动（Float）,清除（Clear）
m0_59744830的博客
04-21 399
浮动(Float)与清除（clear）
前端学习——CSS入门
qq_45727209的博客
05-02 214
前端学习——CSS入门，包括：CSS引入方式、常用选择器、背景(background)、文本常用样式、盒模型、定位、图文组合、浮动等，持续更新中
css 上下漂浮
Jana Jing的分享
02-14 421
<h1 class="playful" aria-label="Wash your hands"> <span aria-hidden="true">W</span> <span aria-hidden="true">a</span> <span aria-hidden="true">s</span> <span aria-hidden="true">h...
CSS - 容器上下浮动动画
王佳斌
05-10 1497
效果图 实现代码 <div class="trans"></div> .trans{ /* 随便来点样式 */ height: 200px; width: 200px; background: red; /* END */ /* 引入动画(1.3s可控制速度) */ animation: heart 1.3s ease-in-out infinite alternate; /* END */ } @keyfram
css上下浮动动画效果
weixin_42333548的博客
12-17 1万+
比如有一个非gif的导向箭头，需要微微浮动提示用户具体操作导向，用css去写，实现方法如下： 1、首先创建一个dom元素，controller是包裹导向箭头的容器，img是导向箭头图片 <div class="controller"> <img src="xxxx" alt=""> </div> 2、css中创建动画，动画的快慢速度可以通过元素...
CSS的浮动（上）
榕城候佳人的博客
03-22 546
.left {.right {左边右边
CSS上下悬浮特效
最新发布
m0_56164131的博客
07-09 1184
要实现一个上下悬浮的特效，可以使用CSS的@keyframes规则和动画属性。
前端——浮动与定位
qq_50628631的博客
05-04 898
目录 浮动 1.浮动定义和语法 2.浮动特性 3.清除浮动 4.清除浮动示例 定位 1.定位组成 1.定位模式 2.边偏移 2.固定定位常用技巧 3.定位示例 4.定位拓展 浮动 1.浮动定义和语法 定义：在一个模块上添加浮动会使模块脱离文档流，也就是在不再占用文档的位置。添加浮动也会使一个行内元素变成块元素。 语法： 选择器{ float:属性值； } 属性值 描述 none 元素不浮动（默认值） left 元素向左浮动 ri..
【14】CSS基础（1）——认识CSS
倏存的博客
01-31 2273
认识CSS：产生背景/概念/组成/语法
CSS布局之浮动和定位
Bulut0907
02-06 4712
目录1. 浮动1.1 浮动元素的特性1.2 清除浮动1.2.1 额外标签法1.2.2 父盒子添加overflow属性1.2.3 父盒子添加after伪元素1.2.4 父盒子添加双伪元素2. 定位 1. 浮动 网页布局第一准则：多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动 网页布局第二准则：先设置盒子大小，再设置盒子位置 1.1 浮动元素的特性 任何元素都可以浮动 浮动元素脱离标准流，不占用标准流的空间。所以会影响浮动的元素后面的标准流元素位置 一个盒子内的元素如果一个元素浮动，则所有元素应
CSS基础笔记九，浮动（如何处理浮动带来的堆叠和浮动影响其他元素）
qq_55006020的博客
06-28 728
浮动的介绍：1，浮动是通过增加一个浮动层级来放置内容。2，浮动使元素脱离了文档流，浮动只有左右浮动，无上下浮动3，浮动的开启：float：left/right4，当多个文件浮动的时候，就会自动排列了，从左往右/从右往左5，如果横向摆放，容器摆放不开，会自动换行浮动优点和缺点。浮动的优点，是可以让我们更加方便的去摆放一个容器内部的子容器，更加好的去设置他们的摆放位置。缺点：1，浮动会造成父级元素的塌方2，后续的元素会受到浮动影响。
css实现div 上下漂浮
m0_48478236的博客
01-13 2182
<style> .homePage { width: 100vw; height: 100vh; position: relative; } .yidong { width: 10vw; height: 10vw; background: red; position: absol.
CSS-float浮动和高度塌陷问题详解
主营前端方向，技术栈是vue
11-21 966
float浮动和高度塌陷问题详解(基本属性、环绕、脱离文档流撑开内容，子浮父塌页面混乱，法1开zoom，法2clear:both，最终方案多功能clearfix)
如何做一个炫酷的动画网站-css实现图片上下浮动效果
city86的博客
05-05 2414
目前网站制作技术已经非常成熟。所以要实现一个炫酷的动画网站还是非常容易，现在通过js和css就都能实现。下面我们来通过一个小动画看看如何用css来实现让你的网站动起来。 效果就是图片上下浮动，如何实现？其实只需要先定义一个样式。 先定义一个样式文件main.css，然后定义样式为： .float-ud { animation: float 4s ease-in-out infinite; } @keyframes float { 0% { transform: t...
css图片上下浮动显示（动画源代码）
gyz15731998001的博客
11-17 1263
css图片上下浮动显示（动画源代码）
css3图片上下浮动动画
weixin_42220039的博客
10-13 8352
ctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;图片上下浮动&lt;/title&gt; &lt;style&gt; * { padding: 0;
css上下左右浮动_浮动-CSS中的左右
cunfen6312的博客
07-29 4944
css上下左右浮动 浮动-CSS中的左右 (Float - right & left in CSS) float property is used to decide which element floats and which doesn't. float属性用于确定哪个元素浮动，哪个元素不浮动。 It's value can either be left or right. An...
css3实现一个上下浮动的动画效果
热门推荐
杨梦飞
03-07 3万+
main .heart{ animation: heart 1.3s ease-in-out 2.7s infinite alternate; } //margin-top会发生卡顿 @keyframes heart{ from{margin-top:0px;} to{margin-top:-6px;} } //用transform就流畅了 @keyframes heart{ from{tra...
css怎么让图片上下浮动,css怎么让图案上下浮动
weixin_34916118的博客
08-03 1905
在css中，[emailprotected]��置上下浮动动画效果来让图案上下浮动；动画的快慢速度可以通过元素高度与animation中的秒数去调整。本教程操作环境：Windows7系统、HTML5&&CSS3版本，该方法适用于所有品牌电脑。推荐：css视频教程css3实现一个上下浮动的动画效果(animation)CSS@keyframes movepoint {25% {to...
CSS学习精华：浮动清除与BFC深入解析
本文是一篇详细的CSS学习总结，旨在帮助读者深入理解和掌握CSS的基础知识和实践技巧。文章主要围绕清除浮动和BFC（Block Formatting Context）这两个核心主题展开。 首先，关于清除浮动，这是一个面试中常见的问题...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值