float不行？用flex试试

最新推荐文章于 2023-01-31 20:14:15 发布
最新推荐文章于 2023-01-31 20:14:15 发布
阅读量1.2k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44540780/article/details/86548485
版权 

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

作者：黄志鹏

撰写时间：2019/1/18

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

下面是代码截图

在这里插入图片描述

下面是浏览器输出结果

在这里插入图片描述

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

下面是浏览器输出结果

在这里插入图片描述

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

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

下面是代码输出结果

在这里插入图片描述

下面是浏览器输出结果

在这里插入图片描述

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

weixin_44540780
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css 布局display为flex,float失效
細水、長流√的专栏
09-07 776
当父元素的display属性为flex时，以下几种属性会失效。3.text-align(文本排列)会失效。时，子元素float直接失效。1.float(浮动)会失效。2.clear(清除)会失效。父元素display 为。
html flex 浮动失效,flex布局和float布局混合使用导致的css失效问题 （上）
weixin_42624889的博客
06-07 3326
需求：两端对齐这个需求应该是比较容易的，使用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 2475
CSS中float、flex（弹性盒子）和grid（网格）布局的优缺点
CSS--float布局和flex布局图解
weixin_45406850的博客
07-13 653
float布局和flex布局图解
flex布局
梁婉玲krysliang的博客
12-25 230
一、什么是flex 任何元素都可定义为flex布局，但一旦它定义了布局为flex，它就变成了一个容器，那么它所有的子元素也自动回成为这个容器的成员。  例如 <div class="flex"></div> <span></span> .flex{     display: flex; } span{     display: ...
dreamweaver cs6怎么给网页添加float浮动效果?
09-24
dreamweaver cs6怎么给网页添加float浮动效果？在浏览网页的时候，经常能在网页中，看到有float浮动布局，该怎么给网页添加float浮动效果呢？请看下文详细介绍，需要的朋友可以参考下
四种两栏布局自适应 ｜ float\bfc\flex\absolute
02-18
四种两栏布局 ｜ 1. float + margin 2. float + bfc 3. flex 4. 父相对子绝对
flex布局简单总结
01-08
任何一个容器都可以指定为 flex 布局（行内元素也可以使用 flex 布局） Webkit 内核的浏览器，必须加上-webkit-前缀 设为 flex 布局以后，子元素的float、clear和vertical-align属性将失效 二、父元素属性 ...
CSS浮动属性Float详解 什么是CSS Float？
04-08
Float 属性还可以用来创建小型布局，例如，在一个小区域中，我们可以使用 Float 属性使头像图片浮动，然后使用相对定位来实现文本的自动调整。 然而，Float 属性也存在一些问题，例如，清除 Float 的问题。如果...
mysql下float类型使用一些误差详解
09-11
MySQL中的`float`类型是一种单精度浮点数，它使用32位（4字节）存储数据，根据IEEE 754标准，这可能导致精度损失，尤其是在处理涉及精确数值计算的任务时，比如财务数据。浮点数在内部是用二进制表示的，某些十进制...
常用布局方法（float，flex，grid）
qq_63730529的博客
07-27 824
css中的flex布局和float布局
弹性盒子flex和浮动float解决大部分布局问题
qq_42306286的博客
09-21 4583
float配合width属性能够对div的排列进行布局， 弹性盒子则能够对div内的元素进行各种布局，根据不同的页面通过弹性盒子和float的灵活搭配几乎能够布局大部分页面。 再搭配属性block inline inline-block inline-flex等就更加灵活。 ...
flex左右布局_响应式布局的整页应用---flex和float一起用也不是魔鬼嘛！
weixin_39845241的博客
12-23 1068
还是重提响应式的三要素：可变栅格系统媒体查询可变图片之前已经学习了一些flex和float知识，下面利用相关知识绘制一张整页布局；大致思路就是：导航栏用float制作，随着屏幕尺寸减小，每个导航元素间的间距减小内容包括：电脑端：左侧的文字环绕+图片，这个选用float； 到平板和移动端就把图片的浮动取消，改为块级元素和文字一上一下显示，这个过程图片尺寸应该是可变的内容还包括：电脑端右侧有一上一下2...
CSS布局—— float布局和flex布局
weixin_44422620的博客
03-05 2221
float布局和flex布局
关于float失效的问题
qq_43238599的博客
03-26 5394
今日遇到了一个float的失效的效果，想了良久解决了。特有做了一些测试，如果有遇到这类问题的，可以查看一下。 1、第一个常见问题flex布局 我想要说明的是flex布局与float浮动不能同时对一个对象操作。 如果父对象是flex布局，子对象是flaot浮动也是没有效果是。 2、块元素，内联块元素，行内元素的问题 float浮动是无法对行内元素起效果的。 ...
css 布局 display为flex,float失效
miin_ying的博客
05-27 3985
今日发现 父元素display 为flex时，子元素float直接失效 补充： 当父元素的display属性为flex时，以下几种属性会失效 1.float(浮动)会失效 2.clear(清除)会失效 3.text-align(文本排列)会失效
九宫格——用html+css制作一个网页
热门推荐
kivet 的博客
03-17 2万+
不废话，直接上代码 HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>task1</title> <link rel="stylesheet&
Flex，再也不用担心页面布局了
酒肉猿
06-16 1570
转载地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大
FLEX布局时候LEFT、RIGHT属性失效的原因。
weixin_33670713的博客
03-10 1211
layout使用absolute的时候， 子控件使用left,top属性确定子控件的位置， 可是有时候在代码段写left ,top属性的时候失效， 而且在涉及面板也看不到,leftv,right,top, down 那个面板了， 这是什么原因呢？ 很可能是给控件了一个styleName的属性赋值了，给它指定了一个CSS样式， 如果你真的这么做了 那么在CSS里面加上 layou...
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、付费专栏及课程。

余额充值