1.浮动

清除浮动之前我们首先需要了解为什么要清除浮动

1. 假设我们有一个父盒子,不设置高度,其高度有内部子盒子的大小自动撑开,这样是完全可行的,因为有时候我们并不想直接固定死父盒子的大小,而是根据子盒子的大小变化

2. 但是有一个问题: 如果我们给子盒子加了浮动,加了浮动的盒子脱离了标准流,而父盒子还是属于标准流,而且父盒子没有设置高度,就导致父盒子的上下边框合并在一起变成一条线

2. 清除浮动

1. 额外标签法(添加额外标签,语义化差)

在最后一个浮动的子元素的后面添加一个标签,标签的样式需要有clear:both属性且必须是块元素

2. overflow:hidden(代码简洁,无法显示溢出的子盒子)

通过给父盒子添加样式 overflow:hidden样式来触发BFC实现清除浮动

3. 伪元素(结构语义化正确)

通过父元素添加:after伪元素并设置相关样式来清除浮动

4. 双伪元素(太麻烦了)

伪元素的加强版

5. 父亲元素添加h5样式

通过给父盒子添加样式 display: flow-root;样式来触发BFC实现清除浮动

推荐使用第五种,我也是喜欢使用这种简单方便

html-css:浮动_清除浮动的更多相关文章

  1. CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性

    最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里 ...

  2. 【转】CSS清除浮动_清除float浮动

    CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...

  3. CSS清除浮动_清除float浮动

    2.clear:both清除浮动为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此di ...

  4. css用clearfix清除浮动

    本文从http://www.studyofnet.com/news/196.html复制.   本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Fire ...

  5. css 浮动和清除浮动

    在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...

  6. 【转】CSS中的浮动和清除浮动

    以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...

  7. [Web 前端] CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

    cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...

  8. 浅谈css中浮动和清除浮动带来的影响

    有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...

  9. CSS浮动与清除浮动(overflow)例子

    在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧． float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神 ...

随机推荐

  1. 深入理解JVM（线程部分） Note

    硬件的效率与一致性 由于计算机的存储设备与处理器的运算速度有几个数量级的差距,所以现代计算机系统都不得不加入一层读写速度尽可能接近处理器运算速度的高速缓存(Cache)来作为内存与处理器之间的缓冲:将 ...

  2. git问题待更新

    git pull failed 错误解决 情况: 刚开始的项目,需要创建一个项目,然后pull从远端的项目,创建分支dev,然后从dev分支开始拉取远端的代码 出现错误,说git pull faile ...

  3. iOS内存区域分布

    概览 1,RAM ROM 2,内存的几大区域 3,案例解释 RAM ROM RAM:运行内存,不能掉电存储. ROM:存储性内存,可以掉电存储,例如内存卡.Flash. 内存的几大区域 为了合理的分配 ...

  4. WinPcap vs Npcap

    1.两者都一直有人在维护,而并不是nmap官网介绍的已经停止维护了,https://nmap.org/npcap/vs-winpcap.html 2.Wireshark默认使用WinPcap,他无法抓 ...

  5. iview中select搜索

    https://www.jianshu.com/p/1c40d7cc440e https://www.cnblogs.com/yun1108/p/10967735.html https://blog. ...

  6. 基于@vue/cli 的构建项目(3.0)

    1.检测node的版本号 注意:1.Vue CLI需要Node.js的版本 8.9+(推荐8.11.0+) 所以在安装Vue CLI之前先看下node的版本 node -v 2.安装@vue/cli ...

  7. 一次生产环境搭建11g RAC的记录

    一.使用惠普3par工具配置共享存储 该部分可由惠普工作人员协助配置,只需将需求告知即可.如果想自己配置,惠普厂商会发送相关的软件工具以及操作手册给用户. 用putty登陆共享存储,使用showpd ...

  8. Java easyui 下拉框默认选中第一个

    html代码: <tr> <td> <div style="margin-bottom:5px">计价方式:   <%--下拉框默认选中第 ...

  9. 什么是RPM

    RPM是RedHat Package Manager(RedHat软件包管理工具)的缩写,这一文件格式名称虽然打上了RedHat的标志,但是其原始设计理念是开放式的,现在包括OpenLinux.S.u ...

  10. python opencv Sobel、Laplace、canny算子的边缘提取 以及参数解析

    前提:各种算子不完全区分好坏,但根据我实际操作分析得到,有的算子之间效果大相径庭,但有的也很相似,也就是各有各的用法,这里按 Sobel.Laplace.canny三种算子作比较,看其结果: 一.  ...