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. javascript常用工具函数总结(不定期补充)未指定标题的文章

    前言 以下代码来自:自己写的.工作项目框架上用到的.其他框架源码上的.网上看到的. 主要是作为工具函数,服务于框架业务,自身不依赖于其他框架类库,部分使用到es6/es7的语法使用时要注意转码 虽然尽 ...

  2. [LeetCode] 1103. Distribute Candies to People 分糖果

    题目: 思路: 本题一开始的思路就是按照流程一步步分下去,算是暴力方法,在官方题解中有利用等差数列进行计算的 这里只记录一下自己的暴力解题方式 只考虑每次分配的糖果数,分配的糖果数为1,2,3,4,5 ...

  3. IDEA 配置自定义Apache与PHP环境

    1. PHP环境 1.1 插件的安装 1.2 关于php环境的配置 2.关于apache的配置 至此,已经配置成功啦,愉快的学习吧!

  4. 01 搭建EasyMock环境

    EasyMock 介绍 EasyMock是一个构建模拟数据的平台,也可以说是一个在线mockJs平台 EasyMock优势 省去配置.安装mockJs步骤,解决多人协作Mock数据不互通问题 不需要在 ...

  5. 02 JPA

    JPA概述 JPA的全称是Java Persistence API, 即Java 持久化API,是SUN公司推出的一套基于ORM的规范,内部是由一系列的接口和抽象类构成.       JPA通过JDK ...

  6. layui表格数据渲染SpringBoot+Thymeleaf返回的数据时报错（Caused by: org.attoparser.ParseException: Could not parse as expression: ")

    layui table渲染数据时报错(Caused by: org.attoparser.ParseException: Could not parse as expression: ") ...

  7. python第一次作业

    import turtle turtle.pensize(2) turtle.pencolor("black") turtle.fillcolor("red") ...

  8. Lucene查询语法汇总

    目录 一.单词查询 二.通配符查询 三.模糊查询 四.近似查询 五.范围查询 六.优先级查询 七.逻辑操作 八.括号分组 九.转义特殊字符 Lucene是目前最为流行的开源全文搜索引擎工具包,提供了完 ...

  9. Spring Cloud 理论篇

    show me the code and talk to me,做的出来更要说的明白 github同步收录 我是布尔bl,你的支持是我分享的动力! 微服务 在 jsp 时代,应用前后端耦合,前后端 a ...

  10. C++ 判断两个圆是否有交集

    #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include <math.h> #include <easyx.h ...