当前位置: 首页 > news >正文

谈谈常用清除浮动的方法

我们在做页面布局的时候,经常需要利用浮动来实现一些布局效果,这样带来的后果就会导致父元素丢失宽度。今天我们就来说说‘找回‘宽度的方法。

而清除浮动后的效果应该是这样的请看:

下面就说说方法,方法其实有非常的多,下面部分方法的截图请大家参考

(1)父级div定义height。
(2)结尾处加空div标签clear:both。
(3)父级div定义伪类:after和zoom。
(4)父级div定义overflow:hidden。
(5)父级div定义overflow:auto。
(6)父级div也浮动,需要定义宽度。
(7)父级div定义display:table。
(8)结尾处加br标签clear:both

一般来说 给父元素加伪元素after是更好的方法。附图一张:

(新手请多多指教)

相关文章:

  • 菜鸟学Linux 第060篇笔记 mail server概念,postfix 编译
  • 紧跟QQ 为什么支付宝不避嫌也推AR红包?
  • 从0到1:PostCSS 插件开发最佳实践
  • 你真的会用Retrofit2吗?Retrofit2完全教程
  • 第一学期心得
  • java第三方包学习之lombok
  • JSON.stringify的使用方法
  • 月薪2500到年薪20万+,阿迪经历了些什么?
  • 【转】Unity中的协同程序-使用Promise进行封装(三)
  • Ubuntu 16.04 几个国内更新源
  • PHP编程----猴子选大王
  • Linux服务器vsftp服务 在本机的时间 与用ftp连接后的时间不一致解决办法
  • Raft算法浅析
  • oracle导出表的cmd语句
  • mysql索引挑选
  • 【Leetcode】101. 对称二叉树
  • 【每日笔记】【Go学习笔记】2019-01-10 codis proxy处理流程
  • axios请求、和返回数据拦截,统一请求报错提示_012
  • CODING 缺陷管理功能正式开始公测
  • flutter的key在widget list的作用以及必要性
  • OSS Web直传 (文件图片)
  • Python打包系统简单入门
  • SpringCloud集成分布式事务LCN (一)
  • 阿里云ubuntu14.04 Nginx反向代理Nodejs
  • 将 Measurements 和 Units 应用到物理学
  • 批量截取pdf文件
  • 普通函数和构造函数的区别
  • 前嗅ForeSpider中数据浏览界面介绍
  • 设计模式走一遍---观察者模式
  • 试着探索高并发下的系统架构面貌
  • 微信小程序设置上一页数据
  • 在weex里面使用chart图表
  • 正则学习笔记
  • Oracle Portal 11g Diagnostics using Remote Diagnostic Agent (RDA) [ID 1059805.
  • 翻译 | The Principles of OOD 面向对象设计原则
  • !!Dom4j 学习笔记
  • #AngularJS#$sce.trustAsResourceUrl
  • #大学#套接字
  • (1)(1.19) TeraRanger One/EVO测距仪
  • (2015)JS ES6 必知的十个 特性
  • (23)Linux的软硬连接
  • (Matalb时序预测)WOA-BP鲸鱼算法优化BP神经网络的多维时序回归预测
  • (编译到47%失败)to be deleted
  • (理论篇)httpmoudle和httphandler一览
  • (转)socket Aio demo
  • *Algs4-1.5.25随机网格的倍率测试-(未读懂题)
  • .NET Entity FrameWork 总结 ,在项目中用处个人感觉不大。适合初级用用,不涉及到与数据库通信。
  • .net 程序 换成 java,NET程序员如何转行为J2EE之java基础上(9)
  • /var/log/cvslog 太大
  • [ 数据结构 - C++] AVL树原理及实现
  • [android] 手机卫士黑名单功能(ListView优化)
  • [Android]如何调试Native memory crash issue
  • [Angular] 笔记 6:ngStyle
  • [BZOJ1008][HNOI2008]越狱
  • [C语言]——柔性数组