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. paddlepaddle目标检测之水果检测（yolov3_mobilenet_v1）

    一.创建项目 (1)进入到https://aistudio.baidu.com/aistudio/projectoverview/public (2)创建项目 点击添加数据集:找到这两个 然后创建即可 ...

  2. C#可空类型知多少

    在项目中我们经常会遇到可为空类型,那么到底什么是可为空类型呢?下面我们将从4个方面为大家剖析. 1.可空类型基础知识 顾名思义,可空类型指的就是某个对象类型可以为空,同时也是System.Nullab ...

  3. .Net Core 使用jenkins 部署到远程服务器docker

    最近一直在研究docker和kubernetes,小型的项目其实也用不到k8s,本文就是描述如何用jenkins 进行构建asp.net core 3.1项目并且发布到远程服务器docker容器中.本 ...

  4. 小白自学机器学习----3.令人头秃的pytorch安装 （No module named 'tools.nnwrap' 错误）

    tensorflow 刚刚会写基础的模块了,今天找到研究方向的代码是pytorch实现的 总是看到这句话,人生苦短,我用pytorch 看来pytorch应该比tensorflow好学,但是!! py ...

  5. js实现图片的懒加载

    原文地址:https://blog.phyer.cn/article/9277.欢迎大家访问我的博客(●ˇ∀ˇ●) // 防抖 let lazy_timer; window.addEventListe ...

  6. [面试专题]前端需要知道的web安全知识

    前端需要知道的web安全知识 标签(空格分隔): 未分类 安全 [Doc] Crypto (加密) [Doc] TLS/SSL [Doc] HTTPS [Point] XSS [Point] CSRF ...

  7. 关于CSS居中问题的一些总结

    前端页面开发中关于内容居中的需求应用概率很大,自己搜集一些资料和总结关于css里的几种居中效果实现 第一常用text-align:center先将子元素将块级元素改为行内元素,即display:inl ...

  8. JZOJ 3927. 【NOIP2014模拟11.6】可见点数

    3927. [NOIP2014模拟11.6]可见点数 (Standard IO) Time Limits: 1000 ms Memory Limits: 65536 KB Description ZP ...

  9. racket学习-call/cc (let/cc)

    Drracket continuation 文中使用let/cc代替call/cc Racket文档中,let/cc说明为: (let/cc k body ...+) Equivalent to (c ...

  10. Ajax的封装，以及利用jquery的ajax获取天气预报

    1.Ajax的封装 function ajax(type,url,param,sync,datetype,callback){//第一个参数是获取数据的类型,第二个参数是传入open的url,第三个是 ...