使用display：flex；布局，需要清浮动吗？哪位大佬了解？

韩老九 2018-12-17 08:58:44

使用display：flex；布局，需要清浮动吗？哪位大佬了解？

...全文

1922 4 打赏收藏转发到动态举报

写回复

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

咸宁七 2019-02-18

打赏
举报

回复

你用了flex会让float失效的，清不清无所谓

我不是老岑 2019-01-16

打赏
举报

回复

flex属性会让浮动失效

简明教程 2018-12-25

打赏
举报

回复

浮动布局和Flex布局是两种完全不同的布局方式，一种是针对 PC端这种固定大版面的，一种是针对移动端响应式的，参考浮动布局 & Flex布局

web小小白 2018-12-17

打赏
举报

回复

不需要。一般的布局是基于盒模型，使用display属性 + float属性 + position属性。 flex是h5中新增的页面布局方案。flex是Flexible Box，就是“弹性布局” 。它具有非常好的灵活性。任何容器都可以开启弹性布局。注意：当开启flex后，子元素的float，cleat，vertical-align将失效

一个十分简单的页面，十分适合初学者，我也是一个初学者，基本是看着一个大佬的页面做的，

1.实现原理：通过float：left/right 使元素脱离文档流，其他元素环绕其排列。- 基础响应 → Float + Media Queries。- 支持自动空间分配（flex-grow/shrink）- 容器可定义主轴方向（flex-direction）- 需要支持 IE10+ → 优先Flexbox。- 需要支持 IE9 → 选择Float。- 需要反向排列 → Flexbox。- 需要清除浮动（clearfix）- 支持元素顺序调整（order）- 简单线性布局 → Float。

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、flex布局是什么？二、flex 案例需求分析（1）初始样式：（2）需求分析：（1）需要整体布局为居中（2）左侧边导航栏随着鼠标的进入改变背景颜色和字体颜色（3）右侧边链接图片可以随着屏幕的大小自适应换行（4）底部同样自适应并居中（5）最终样式（3）案例讲解（1）实现基础分块headermainfooter（4）最终代码欢迎小伙伴们留言讨论当然也欢迎大佬改正错误哈哈哈哈前言提示：主要内容 flex弹性布局以及c

文章目录前言一、Flex 弹性布局的定义Flex布局组成部分关系-可视化二、使用语法2.1 flex容器的语法2.1.1 flex-direction2.2.2 flex-wrap属性2.2.3 flex-flow属性2.2.4 justify-content属性（常用）1.引入库2.读入数据总结前言在前端开发中，往往需要使用到各种CSS布局来搭建页面视图的结构框架。使得根据需求，将对应的内容在对应的位置。常见的CSS布局有：简单的使用CSS 中浮动属性 ( Float ) 来对布局进行控制；

对于一个刚起步的新手来说，搞定css属性确实没有那么容易。现在我来说说我对display几个属性值得理解。(只是几个经常用到的属性值)，不足的地方还请大佬们指正。1.display:nonedisplay：none; 此属性是说不让元素显示。先上图2.display:blockdisplay:block是对于行内元素来说的，例如span,a,i.em等。块级元素和行内元素的区别：1)块级元素会独占...

61,129

社区成员

60,711

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章