float不行？用flex试试

最新推荐文章于 2023-09-07 16:07:48 发布
原创 最新推荐文章于 2023-09-07 16:07:48 发布 · 1.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在前端开发中使用Flex布局相较于传统Float布局的优势。通过实例演示了在元素压缩情况下，Flex布局能够保持良好的响应式效果，避免布局混乱。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


开发工具与关键技术：前端

作者：黄志鹏

撰写时间：2019/1/18

在学习前端中，当我们想要并排元素的时候我们常常直接float:left设置左浮动就行了。

下面是代码截图

在这里插入图片描述

下面是浏览器输出结果

在这里插入图片描述

问题来了，当元素遭到压缩的时候呢，那么样式布局就全乱了；

下面是浏览器输出结果

在这里插入图片描述

这时候我们就不能用float,改用flex. Flex 是 Flexible Box 的缩写，意为"弹性布局",

但要注意的是，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

下面是代码输出结果

在这里插入图片描述

下面是浏览器输出结果

在这里插入图片描述

在这里插入图片描述
通过浏览器输出结果我们可以看到改用flex后无论怎么压缩样式布局都不会乱

基础篇12—CSS3中displex:flex弹性盒布局详解
风中追风
02-27 497
长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 float 和 position。这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务。 以下简单的布局需求是难以或不可能用这样的工具（float 和 position）方便且灵活的实现的： 在父内容里面垂直居中一个块内容? 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用? 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同?
php 生成 pdf dompdf 库使用
qq_44910432的博客
04-27 1212
php 生成 pdf dompdf 库使用
css 布局display为flex,float失效
細水、長流√的专栏
09-07 1075
当父元素的display属性为flex时，以下几种属性会失效。3.text-align(文本排列)会失效。时，子元素float直接失效。1.float(浮动)会失效。2.clear(清除)会失效。父元素display 为。
关于float失效的问题
qq_43238599的博客
03-26 5669
今日遇到了一个float的失效的效果，想了良久解决了。特有做了一些测试，如果有遇到这类问题的，可以查看一下。 1、第一个常见问题flex布局 我想要说明的是flex布局与float浮动不能同时对一个对象操作。 如果父对象是flex布局，子对象是flaot浮动也是没有效果是。 2、块元素，内联块元素，行内元素的问题 float浮动是无法对行内元素起效果的。 ...
html flex 浮动失效,flex布局和float布局混合使用导致的css失效问题 （上）
weixin_42624889的博客
06-07 3449
需求：两端对齐这个需求应该是比较容易的，使用flex布局就可以轻松完成。但是我贱啊，没办法。flex布局和float布局混用导致的布局混乱的原因#root {width: 800px;height: 800px;position: relative;margin: auto;}.container {width: 100%;height: auto;border: 1px solid #ccc;/...
CSS中float、flex（弹性盒子）和grid（网格）布局的优缺点
m0_65247031的博客
01-31 2794
CSS中float、flex（弹性盒子）和grid（网格）布局的优缺点
CSS--float布局和flex布局图解
weixin_45406850的博客
07-13 740
float布局和flex布局图解
flex布局设置不了宽度
03-26
- 将它们转换成 block-level 元素或将 container 改变为 text-align:center 加 float:left/right 结合的方式模拟类似的视觉体验[^3]。 --- ### 实际案例演示 下面提供一段完整的 HTML 和 CSS 示例来展示如何精确...
帮我用vue3+Arco Design生成一个帮助小精灵完整组件！要求会动可爱能不定时提示帮助信息
最新发布
06-27
- 使用 CSS `float` 动画实现上下浮动效果 - 悬停时有放大效果（`transform: scale(1.1)`） - 渐变背景色（蓝粉色渐变） 2. **随机提示系统**： - 预设多条帮助信息（可自定义） - 每 10-30 秒随机显示一条...
用js写个音乐盒子
yingyubuhao的博客
05-03 421
没有运用后端，还有一些数据需要自己去放
常用布局方法（float，flex，grid）
qq_63730529的博客
07-27 1242
css中的flex布局和float布局
css 布局 display为flex,float失效
miin_ying的博客
05-27 4196
今日发现 父元素display 为flex时，子元素float直接失效 补充： 当父元素的display属性为flex时，以下几种属性会失效 1.float(浮动)会失效 2.clear(清除)会失效 3.text-align(文本排列)会失效
弹性盒子flex和浮动float解决大部分布局问题
qq_42306286的博客
09-21 4722
float配合width属性能够对div的排列进行布局， 弹性盒子则能够对div内的元素进行各种布局，根据不同的页面通过弹性盒子和float的灵活搭配几乎能够布局大部分页面。 再搭配属性block inline inline-block inline-flex等就更加灵活。 ...
flex布局
Tiger's blog
08-21 346
1.flex布局 1.1传统布局与flex布局 （1）如果是PC端页面布局，还是使用传统布局； （２）如果是移动端或者不考虑兼容性的PC端页面布局，则使用flex弹性布局 1.2布局原理 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效 子盒子可以横向排列，也可以纵向排列，布局灵活 总结：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。 2.属性 2.1常见的父项属性 以下6个属性是对父元素设置的： （1）flex-direction：设
CSS布局—— float布局和flex布局
weixin_44422620的博客
03-05 2677
float布局和flex布局
flex特性及优缺点
xuhuanchao的专栏
02-23 3681
本贴转自：http://smartblack.javaeye.com/blog/556202 一项技术，从概念提出到技术研发到商业发布，再到实际应用，最终将产品呈现在用户面前，这是一个漫长而复杂的过程。在这当中，很多有创意有生命力的技术因为各种原因小小遗憾地不幸夭折了。Flex能走到今天确实不易，下面让我们从不同的角度来看一下它是如何过关斩将，赢得众多青睐的。 技术角度：（１）具备
关于float的值与浮动失效问题
热门推荐
lj403669131的博客
04-02 1万+
float属性定义在哪个方向浮动，有三个值，分别为left,right,none,inheirt。 left : 向左浮动 right：向右浮动 none:不浮动 inheirt:从父元素继承float属性的值 <style> .div1{ width:300px; height:200px; float:left; } .div2{ width:300px; height:300px; flo
Flex 布局教程：语法篇
leon-这个程序员不闷骚的博客
06-27 8351
网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就
浮动布局float带来的高度塌陷——清除浮动
Violet的博客
01-08 7343
一、清除浮动 还是 闭合浮动 （Enclosing float or Clearing float）？ 很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。 1）清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；
astype 将str转换成float类型 ?
05-30
可以使用astype()方法将字符串转换为float类型，示例代码如下： ``` python import numpy as np num_str = "3.14" num_float = np.array([num_str]).astype(np.float) print(num_float) ``` 在上述代码中，首先将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值