CSS-浮动流

最新推荐文章于 2022-09-29 10:12:06 发布
最新推荐文章于 2022-09-29 10:12:06 发布
阅读量550 收藏
点赞数
分类专栏： 前端 文章标签： 前端 浮动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/slyslyme/article/details/80437255
版权

1. 浮动流没有居中对齐即没有center这个取值

2. 不可以使用margin：0 auto；

3. 相同方向上的浮动流先浮动的元素会显示在前面，

4. 浮动元素有贴靠现象：

  • 如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
    • 如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠， 如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边
_Always_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
经验分享：CSS浮动(float,clear)通俗讲解
weixin_33714884的博客
03-27 6987
       很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。        前些天小菜终于搞懂了浮动的基本原理，迫不及待的分享给大家。        写在前面的话：        由于CSS内容比较多，小菜没有精力从头到尾讲一遍，只能有针对性的讲解。        如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你...
CSS初入门：网页布局之浮动流排版方式
lalala_dxf的博客
03-17 1128
CSS网页布局 简介 一、什么是网页布局 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版。 排版方式：标准流（文档流、普通流） 1、标准流(文档流/普通流)处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在标准流(文档流/普通流)中。 2、元素在标准流(文档流/普通流)中的特点 （1）块元素 1.块元素在标准流(文档流/普通流)中会独占一行，块元素会自上向下排列。 2.块元素在标准流(文档流/普通流)中默认宽度是父元素的100% 3.块元素在标准流(文档流/普通流)中的高度
CSS系列之浮动详解
老__L的博客
02-02 4392
本文主要介绍CSS的clear属性。元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制。移动到指定位置。
李南江的前端课程知识点（九）浮动流
weixin_45012866的博客
12-07 344
网页的布局方式 浏览器是如何对网页中的元素进行排版的。 1、标准流（文档流/普通流）排版方式 1.1、浏览器默认的排版方式就是标准流的排版方式。 1.2、在CSS中将元素分为三类，分别是块级元素、行内元素、行内块级元素。 1.3、在标准流中有两种排版方式：一种是垂直排版（块级元素），一种是水平排版（行内元素，行内块级元素） 2、浮动流排版方式 2.1、浮动流是一种“半脱离标准流”的排版方式。 2.2、浮动流只有一种排版方式，就是水平排版方式，它只能设置某个元素在其父元素中左对齐或者右对齐。 注意点： 1、浮
css：标准流、浮动、定位
qi341500的博客
09-29 900
一、标准流： 二、浮动：float 1、浮动布局注意点 2、消除浮动 3、清除浮动，防止父级边框塌陷的五种方法 三、定位 1、定位模式： 2、static属性值 3、relative属性值：相对定位 4、绝对定位：absolute 5、子绝父相 6、固定定位：fixe 7、粘性定位：sticky 8、定位叠放次序：z-index属性 9、网页元素透明度 10、定位拓展 11、元素的隐藏
浮动流
czw的博客
12-26 225
display ​ display属性：常用取值 inline(行级元素)、block(块级元素)、inline-block(行内块元素)，none(隐藏，不占空间) 浮动流 1.浮动流，设置标签的属性float，它能够让元素向左或者向右进行浮动，浮动流只能是左右浮动没有上下浮动，如果元素按照浮动流渲染，那么该元素会脱离标准流，在浮动流中没有行级元素和块级元素之说。但是都可以设置宽高。 2.在标准流的加载方式下，如果更改标准流，那么该元素后面的元素会相应的顶上来。 3.如果按照浮动流进行加载，在浮动流加载
CSS浮动与清除浮动
01-08
今天是第一次写博客，已经迫不及待地想把这周在逆战班学习的内容分享一下，这是我对css浮动与清除浮动的理解，希望可以帮助你。 CSS浮动与清除浮动（ 本文以div元素布局为例。） 前言：由于CSS内容比较多，只能有...
3一面 3：CSS-HTML 知识点与高频考题解析.md
最新发布
03-31
- 文档流概念 - 定位分类 - fixed 定位特点 - 绝对定位计算方式 - `flex`布局 - 如何实现居中对齐？ - 理解语义化 - CSS3 动画 - 重绘和回流 ----- ## 选择器的权重和优先级 CSS 选择器有很多，不同的选择器的...
理解CSS浮动float、定位position
09-27
本文针对CSS浮动float、定位position进行学习理解，通过实例帮助大家掌握CSS浮动float、定位position技巧，感兴趣的小伙伴们可以参考一下
CSS 关于浮动
12-11
浮动是 css 的定位属性。我们可以看一下印刷设计来了解它的起源和作用。印刷布局中，文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。这是一个例子： 在排版软件里面，存放文字的盒子可以被设置为允许...
揭开迷惑 理解CSS的浮动Float
12-03
Float（浮动）概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解，而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而，这些问题的根源并不在于理论本身，而是开发人员以及浏览器对...
CSS浮动
super码力的博客
09-30 4734
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
CSS网页的布局方式（标准流/浮动流/定位流）
qq_48858031的博客
07-13 929
网页的布局方式其实是就是指浏览器是如何对网页中的元素进行排版的。1、标准流（文档流/普通流）排版方式：（1）默认的排版方式就是标准流排版方式（2）在CSS中将元素分为三类，分别为块级元素/行内元素/行内块级元素（3）标准流中，垂直排版：块级元素，水平排版：行内元素/行内块级元素 在标准流中，内容的高度可以撑起父元素的高度企业开发中什么时候使用标准流什么时候使用浮动流？垂直方向使用标准流，水平方向使用浮动流。拿到一个很复杂的界面如何下手？1、从上至下布局2、从外向内布局3、水平方向可以先划分为一左一右再对左边
一天搞定CSS： 浮动（float）及文档流--10
Java仗剑走天涯
05-10 2786
一天搞定CSS： 浮动（float）及文档流--10
css3之浮动流技术及清除浮动流
weixin_43343144的博客
03-26 236
浮动流的原理是：浮动的目的可以让块级元素左右漂浮【打破块级元素独占一行的特性】 浮动流float只有两个属性，一个left左浮动，一个right右浮动。 浮动的原则就是：只能在块元素当前行的左右浮动，不可能上下浮动，这也是和定位最大的区别【定位没有任何限制，可以上下左右到处跑】 为什么要清除浮动流：浮动流就相当于一个有弹性的盒子，当盒子拉到最大的时候，如果没有什么东西来撑住盒子，一旦释...
浮动(float)以及消除浮动流
qq_40860137的博客
11-18 7336
语法:float: left / right; 可能的值 值 描述 left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动，并会显示在其在文本中出现的位置。 inherit 规定应该从父元素继承 float 属性的值。 功能:无论是display为inline,inline-block,还是block,float都可...
CSS 浮动流
mengxianglong123的博客
11-23 149
浮动流： 1.什么是浮动元素的脱标? 脱标: 脱离标准流 当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标 2.浮动元素脱标之后会有什么影响? 如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素 3.浮动流排序规则：  3.1相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示...
CSS浮动流以及清除浮动带来的影响
空之境界
02-23 826
CSS学习总结一：浮动流以及清除浮动带来的影响 学习前端的童鞋们刚开始接触到页面布局的时候一点会非常困惑，会感觉学了很多知识但是一到自己写代码的时候页面却不按照自己的想法显示。这是因为我们学习的知识都是零碎的，我们并没有弄清知识之间的联系，所以我们在学习的过程中不能只看视频，一定要多动手打打代码，这样才能发现问题并解决。 一、css有三大布局流：标准流、浮动流和定位流 本文主要介绍下标准流和浮动流...
CSS学习笔记（6）【浮动流以及浮动元素相关问题】
OceanH的博客
03-06 236
CSS基础学习 一、浮动流基本概念 浮动流是一种半脱离标准流的排版方式 浮动流只有水平排版方式，它只能设置某个元素左对齐或者右对齐 注意：（1）浮动流没有居中 （2）在浮动流中是不可以使用margin:0 auto;的 特点：（1）在浮动流中是不区分块级元素、行内元素和行内块级元素的！都可以水平排版 （2）在浮动流中，无论是块级元素、行内元素还是行内块级元素都可以设置宽高 （3）综上，浮动流中的元素和标准流中的行内块级元素很相似 二、浮动元素的脱标： 1.什么是浮动元素的脱标？ “脱标”即脱离标准流 当某一
css左浮动和右浮动两边
08-18
通过设置元素的浮动属性，可以使元素脱离正常的文档流并相邻地排列在一起。 要将元素左浮动，可以使用以下CSS代码： ```css .element { float: left; } ``` 这将使元素向左浮动，并允许其他元素紧随其后排列。 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值