CSS第四天（2）-浮动

最新推荐文章于 2024-07-19 15:50:46 发布
最新推荐文章于 2024-07-19 15:50:46 发布
阅读量85 收藏
点赞数
分类专栏： html css 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45898579/article/details/114704735
版权
本文深入探讨了CSS中的浮动概念，包括浮动的重要性、浮动的三大特性——脱标、对齐性和类行内块元素。还介绍了常见的网页布局中浮动的运用，并详细阐述了清除浮动的必要性及其四种实现方法，帮助理解并解决因浮动引起的布局问题。
摘要由CSDN通过智能技术生成

CSS第四天（2）-浮动

1 浮动

1.1 传统网页布局的三种方式

在这里插入图片描述

1.2 标准流

在这里插入图片描述

1.3 为什么需要浮动

在这里插入图片描述

1.4 什么是浮动

在这里插入图片描述

1.5 浮动特性

浮动的三大特性：
在这里插入图片描述

1.5.1 .浮动最重要的特性 : 脱标！！！！！

最低0.47元/天 解锁文章
陈平安_码来
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3-第四部分-浮动
MUYUFANSHENXUE的博客
03-21 407
1，浮动 浮动的出现是为解决图片站住了文字的效果，想要实现一种文字坏绕图片而产生的技术。 后来随着页面的提升，人们发现，使用浮动技术，可以用来帮助页面布局，所以浮动又有了一些新的作用，比如 可以使用浮动，让无序列表从纵向排列变成横向排列等等。 2，文档流 我们的页面布局实在不做任何样式定位，浮动，修改的情况下，他会进行一个正常文档流的效果展示，正常文档流是根据我们html页面标签顺序，自上而下，从左到右的格式进行排列的。 3，行内元素和块元素的区别 行内元素和块级元素的区别 1），..
CSS入门基础----浮动
bjsyc123456的博客
10-07 483
CSS 布局的三种机制 CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中： 普通流（标准流）： 块级元素会独占一行，从上向下排列；行内元素会按照顺序，从左到右排列，碰到父元素边缘则自动换行； 浮动：让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。 定位：将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。 什么是浮动(float)? 概念： 元素的浮动是指设置了浮动属性的元素会： 脱离标准普通流的控制 移动到指定位置。 .
CSS------第四章浮动
BUG专业户
05-21 582
精灵图 标签分类 css选择器进阶 float浮动
前端学习第六天-css浮动和定位
weixin_55702682的博客
03-01 989
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。在CSS中，通过float属性来定义浮动，其基本语法格式如下：选择器{float:属性值;属性值描述none元素不浮动（默认值）left元素向左浮动right元素向右浮动清除浮动的方式优点缺点额外标签法（隔墙法）通俗易懂，书写方便添加许多无意义的标签，结构化较差。父级overflow:hidden/auto/scroll;书写简单溢出隐藏父级after伪元素结构语义化正确。
CSS第四天-浮动
m0_61418777的博客
03-05 25
CSS案例
CSS第四天——浮动
fjhkrje的博客
09-06 251
CSS第四天——浮动 1.浮动 1.1CSS布局的三种机制 网页布局的核心–就是用 CSS来摆放盒子。 CSS提供三种机制来设置盒子的摆放位置——普通流（标准流）、浮动、定位 普通流——块级元素从上向下、行内元素自左到右的HTML布局 浮动——让盒子从普通流浮起来，主要作用是让多个块级盒子一行显示 定位——将盒子定在浏览器的某一个位置–CSS离不开定位，特别是后面的js特效。 1.2为什么需要浮动 如果一行需要多个块且对齐，行内块（inline-block）的缺陷： 1.它可以实现多个元素一行显示，
CSS--浮动
weixin_42584834的博客
11-28 897
浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。6.浮动元素不会超过它上边的浮动的兄弟元素，最多就是和它一样高。元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置。5.如果浮动元素上边是一个没有浮动的块元素，则浮动元素无法上移。4.浮动元素向左或向右移动时，不会超过它前边的其他浮动元素。1.浮动元素会完全脱离文档流，不再占据文档流中的位置。所以元素下边的还在文档流中的元素会自动向上移动。2.设置浮动以后元素会向父元素的左侧或右侧移动。
CSS学习笔记四---背景属性 & 浮动属性
Flora_hsx的博客
07-11 319
背景属性 & 浮动属性
CSS基础四--浮动布局
m0_48701975的博客
04-03 101
1.浮动（float） 1.1传统网页布局的三种方式 网页布局的本质–用CSS来摆放盒子。把盒子摆放到相应位置。 CSS提供了三种传统布局方式 普通流（标准流） 浮动 定位 1.2标准流（普通流/文档流） ...
css基础4-浮动布局
12-05
CSS基础-浮动布局 CSS 布局浮动目录是 CSS 中的一种基本布局方式，通过浮动可以实现网页的水平布局和垂直布局。浮动主要用于网页布局，让垂直布局的盒子变成水平布局。 一、结构伪类选择器 结构伪类选择器是一种...
第十三课 css元素、定位与浮动-011
08-03
本节我们将深入探讨CSS中的元素类型、定位和浮动，这对于创建灵活且响应式的网页布局至关重要。 首先，我们来看CSS中的元素类型： 1. **行内元素**（Inline Elements）：如`<a>`（超链接）、`<span>`（内联文本内容...
HTML5+CSS3网页设计-第七章 浮动.pptx
12-21
2. 使用`overflow:hidden`：设置父元素的`overflow`属性为`hidden`，强制其包裹浮动的子元素。 3. 使用`display:table`：将父元素的`display`属性设置为`table`，使它像表格一样处理内部浮动元素。 4. 使用`clear:...
td-unit2-css-layout-project-files
02-16
【描述】虽然描述简单地重复了标题，但我们可以从中推断出这是一个针对“td-unit2”的第二单元课程，可能专注于CSS布局的部分。这样的项目通常旨在帮助学习者通过实际操作，理解并掌握CSS在创建网页布局中的应用。 ...
css网站布局实录-2
12-15
4. **浮动与定位**：浮动（float）和定位（positioning）是CSS布局中的两个重要工具。浮动常用于创建多列布局，而定位则可以精确控制元素的位置，这两者结合使用能解决复杂的布局问题。 5. **圆角与阴影**：CSS3...
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 2005
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
最新！CSSCI（2023-2024）期刊目录公布！
最新发布
2301_76900678的博客
07-19 376
C刊一般指CSSCI来源期刊，即南大核心的缩写，中文名称为《中文社会科学引文索引》，由南京大学中国社会科学研究评价中心制定，用来评价中文社会科学领域的论文收录和文献被引用情况，是我国人文社会科学评价领域的标志性工程。C扩即CSSCI来源期刊扩展版。由于上文所述的C刊是国内期刊中的重要刊物，遴选数量有限，一些优秀刊物由于数量限制无法进入C刊目录，C扩一般指办刊水平和学术价值与真正入选目录期刊还有一些差距但差距不大的刊物，C扩有进入C刊的预期，但C扩是否为核心期刊具体仍由不同单位自己判断。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1322
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
HTML5+CSS3小实例：纯CSS实现奥运五环
艾恩小灰灰的博客
07-15 2642
实例：纯CSS实现奥运五环。技术栈：HTML+CSS。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值