应用场景

子元素标签使用 浮动后,会出现浮在父元素上层,脱离了。导致父元素没办法根据子元素的高度而变化,提供以下解决方案。

解决代码

把 ‘.clearfix ’ Class 样式添加到 父元素即可。


.clearfix:after,
.clearfix:before{content:" ";display:table;}
.clearfix:after{clear:both;}

解决 css 浮动后 父元素高度失效问题的更多相关文章

  1. float浮动导致父元素高度坍塌的原因及清除浮动方法

        一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内, ...

  2. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  3. 关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案

    以下是个人学习笔记,仅供学习参考. 1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题. 在给没有margin-top-b ...

  4. css 添加伪元素 消除浮动 对父元素高度产生的影响

  5. HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗)

    元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...

  6. 解决float浮动带来的父元素高度没有的问题---清除浮动

    float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...

  7. 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法

    内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...

  8. CSS浮动布局带来的高度塌陷以及其解决办法

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  9. css float父元素高度塌陷

    css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...

随机推荐

  1. Qt:QMap

    0.说明 QMap < Key , T > 一个QMap就是一个K-V对,也可以说是字典对象. 1)构造 构造一个Key是QString,Value是int的QMap: QMap<Q ...

  2. vue项目npm run dev 报错error in ./src/main.js Module build failed: Error: Cannot find module 'babel-plugin-syntax-jsx'

    问题: vue 项目npm run dev运行时报错,如下图:  原因: 缺少相应的组件 解决办法: 安装相应组件: npm install babel-plugin-syntax-jsx --sav ...

  3. WPF-GridView设置列宽按比例分配

    将ListView包裹在一个父Grid中 写一个与ListView平行的Grid,设置该Grid的列数与ListView中GridView的列数相同,将该Grid各列设置列宽按比例分配 将ListVi ...

  4. 【面经】Java面试突击

    基础语法 基本数据结构 Java 的基本数据类型有 8 种,包括 6 种数字类型.1 种字符类型和 1 种布尔类型. 基本数据类型总览 数字类型包括 4 种整数类型和 2 种浮点数类型,4 种整数类型 ...

  5. Docker-镜像常用命令&安装Mysql\Nginx\ES\Kibana练习

    目录 前言: 一.常用命令 1.帮助命令 2.查看现在本地有哪些镜像 3.镜像搜索&下载&运行&停止&删除 镜像搜索 镜像下载 不指定版本下载 指定版本下载 运行镜像 ...

  6. lavarel 框架 搜索后分页

    ................框架控制器 public function list(Request $request){ $word=$request->input('word'); $arr ...

  7. laravel 终端命令

    创建模块及控制器

  8. 三大主流软件负载均衡器对比(LVS & Nginx & Haproxy)

    LVS:1.抗负载能力强.抗负载能力强.性能高,能达到F5硬件的60%:对内存和cpu资源消耗比较低2.工作在网络4层,通过vrrp协议转发(仅作分发之用),具体的流量由linux内核处理,因此没有流 ...

  9. centOS 7 离线安装 MySQL 5.6 完美安装

    centOS 7 离线安装 MySQL 5.6 centOS 7 离线安装 MySQL 5.6 准备环境 1.离线 centOS 7(此处为 centOS 7 最小安装) 2.nginx 安装文件 ( ...

  10. 网关中间件-Nginx(二)

    网关中间件-Nginx(一) 第一部分我们主要介绍如下几点: 1.nginx的基本概念 2.nginx结合业务场景实现负载均衡 3.常见问题的举例 这一部分主要介绍Nginx中限流,缓存,动静分离,以 ...