《web开发： CSS 浮动》

最新推荐文章于 2022-05-31 23:25:21 发布
最新推荐文章于 2022-05-31 23:25:21 发布
阅读量532 收藏 2
点赞数
分类专栏： 【 勿拍 - 整理区 】
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yexiangCSDN/article/details/112850240
版权
【 勿拍 - 整理区 】 专栏收录该内容
129 篇文章 32 订阅 ¥99.90 ¥299.90
订阅专栏
本文详细介绍了CSS浮动，包括浮动的三种布局方式、浮动元素的特性、如何让多个块级元素水平排列、浮动布局的常见应用及注意事项。强调了浮动元素会脱离标准流并具有行内块元素特性，以及在布局中如何使用清除浮动来解决父级高度塌陷问题。
摘要由CSDN通过智能技术生成

一、CSS 浮动

  • 网页布局的本质——用 CSS 来摆放盒子。 把盒子摆放到相应位置
  • CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)： 
  • 普通流（标准流） 
  • 浮动 
  • 定位 

 

1. 标准流（普通流/文档流） 

  • 所谓的标准流:  就是标签按照规定好默认方式排列

块级元素会独占一行，从上向下顺序排列

了解本专栏 订阅专栏 解锁全文
HarkerYX
关注
专栏目录
订阅专栏
Web前端篇：css浮动
ITmiaomiao666的博客
06-13 716
浮动是网页布局中非常重要的一个属性。那么浮动这个属性一开始设计的初衷是为了网页的文字环绕效果。 文字环绕现象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平方向外边距</title> <s...
web应用开发：css构建移动版旅游网站界面
weixin_43916678的博客
02-26 2793
新建travel.html文件 代码如下： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>国内旅游</title> <!--链入对网页某类元素的通用设置样式--> <link h...
CSS系列之浮动详解
老__L的博客
02-02 5860
本文主要介绍CSS的clear属性。元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制。移动到指定位置。
关于CSS浮动讲解
Clotho2012的博客
07-20 165
教程开始： 首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。如下图： 可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的。 注意，以上这些理论，是指标准流中的div。 小菜认为，无论...
CSS浮动规则详解（推荐）
weixin_30699831的博客
04-07 122
CSS中float是在一系列详细规则控制浮动元素的摆放位置，可以想象成一个氢气球在封闭盒子里漂浮的平面图。具体的规则有如下几点： 1、浮动元素的左边（右边）外边界不能超出其包含块的左边（右边）的内边界，绝对不会越位溢出的。什么？什么叫包含块？不知道的朋友到前面几篇帖子看看。 2、浮动元素的左边（右边）外边界必须是包含块中之前出现的浮动元素的右边（左边）外边界，请注意前后出现的左右的顺序，...
CSS——浮动详解
weixin_44541467的博客
01-19 467
写页面布局的过程中，浮动是大家经常使用的属性，帮我们解决了非常多布局困难。那么下面就来看看浮动究竟有哪些作用。 一般Float（浮动）有inherit（继承）、left（左）、none（没有）、right（右）四种 先设置两个div（块级标签），给予宽和高。正常效果如下： 下面给予div 浮动属性float: left： 这样就能让元素不占一行并排显示了。因为它们如其名浮动（我认为向外浮）起来了，脱离了文档流，不再受行内/块级的限制。 第一点、脱离文档流 图一、 从图中我们能看..
全面了解CSS“浮动”
qq_43293207的博客
04-02 470
由于浮动元素的脱离文档流，.box2会忽略浮动元素的原空间（即当其不存在），由因为普通div不设置宽度默认会是父元素宽度。普通的块级元素之间的margin-top和margin-bottom有时会出现margin合并的现象，而浮动元素由于其自身会变成一个BFC（块级格式化上下文），不会影响外部元素，所以不会出现margin重叠问题。此时我们发现：没有设置高度的container元素，其实际高度只由标准文档流的box2元素撑起来了21px，而设置了30px高度的浮动元素由于脱离文档流其高度被忽略了。
DIV+CSS布局：CSS浮动float属性详解[归纳].pdf
10-11
CSS浮动float属性详解 在Web开发中，布局是非常重要的一方面，浮动float属性是CSS布局中非常关键的属性。通过对浮动float属性的理解和掌握，我们可以更好地实现网页的布局和排版。 Float浮动属性基本释义 float...
DIVCSS布局：CSS浮动float属性详解.doc
01-08
在传统表格布局中，我们依赖表格的对齐方式来组织内容，但在Web标准开发中，浮动属性成为了实现灵活布局的核心工具。本文将深入探讨CSS中的浮动属性，特别是`float`属性。 `float`属性允许我们将元素（如`div`）...
universe-ui:CSS组件库-使用普通CSS构建
03-16
HTML组件是现代Web开发的基础，Universe UI中可能包括按钮（Buttons）、表单元素（Form Elements）、导航（Navigation）、网格系统（Grid System）、提示信息（Tooltips）、模态框（Modals）、下拉菜单（Dropdowns）...
【CSS】关于CSS的布局定位（基础）
一文不值的博客
10-16 687
关于CSS的布局定位基础：position+display+float+overflow
CSS浮动基础详解
抽象空间的博客
01-28 1026
一、浮动 每个元素单独占据浏览器的一整块。 块级元素按照标准流向下依次排列。 实验一，仅一个div设置浮动（左）代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht
CSS中的浮动问题详解
技术无止境，人生仍探索。
03-20 794
CSS中的浮动问题所带来的“父级坍塌”等怪异的现象也是一个让人费神的东西，今天笔者就CSS中的浮动问题进行详细的阐释，以及如何防止意外情况的发生。 一、浮动问题的产生 首先我们来看一个例子： 在浏览器中的效果是这样的： 粉色部分右边都是空白既浪费空间又不美观，我们对它进行浮动。给.box加上float:left属性，看一下这时候的效果： 会发现此时绿色部分跑到粉色部分下面去了，这是因为粉色部分...
css第4天笔记-圆角边框；盒子阴影；文字阴影；浮动；PS切图
weixin_51353891的博客
04-14 357
学习内容：圆角边框；盒子阴影；文字阴影；浮动；PS切图 css第03天 一、其他样式 1、圆角边框 在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。 border-radius 属性用于设置元素的外边框圆角。 语法： border-radius:length; 参数值可以为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50% 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角 分开写：bor.
css float
wqeqwr的博客
09-18 434
学习目标(4): 1.熟练掌握CSS浮动 2.熟练掌握CSS定位 3.熟练掌握CSS高级技巧强化CSS 浮动(float) 普通流(normal flow) CSS的定位机制有3种：普通流（标准流）、浮动和定位。 html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素...
CSS 浮动（float）详解
Datura_Elena的博客
01-03 365
看了很多大牛总结的float特性，现在进行简单的整理和总结。 1.浮动的特性： ①浮动没有脱离标准文档流，但脱离了文档流。 注：此处的标准文档流=文本流+文档流，文本流相对于文字段落来讲，文档流相对于盒子模型来讲。也就是说浮动元素会脱离文档流导致浮动后面的元素会无视浮动元素，但文本流不会无视浮动元素，会围绕着浮动元素周围，类似于文字四周环绕的效果。 参考文章：关于float是否脱离标准文档...
【css浮动讲解】
m0_67742636的博客
05-31 221
网页布局本质是用css来摆放盒子，把盒子摆放到相应的位置，css提供了三种传统布局方式（简单来说，就是盒子如何进行排列顺序） 1. 普通流（标准流） 2.浮动 3.定位 1.2 标准流（普通流或者叫文档流） 1.块元素：div,hr,p,h1-h6,ul,ol,li,dl,form,tabl 2.行内元素（内联元素）：会按照顺序会从左往右依次排序，碰到父元素的边缘则自动换行，常用标签有：span,a,i,em等 以上都是标准流布局就是按照标签规定好的顺序进行排列 <!DOCT
web前端-CSS-浮动
jinchenpeng的博客
05-30 286
值得注意的是：
什么是css的浮动
weixin_43342105的博客
08-18 424
<!-- 浮动 --> <!-- 块元素在文档流中默认垂直排列 如果希望块元素在页面中水平排列 可以是其脱离文档流 使用float来使元素浮动，从而脱离文档流 可选值： none:默认值，认在文档流中排列 left:像左浮动 right:向右浮动 元素浮动以后，会尽量向页面的左上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

HarkerYX

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值