应用场景

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

解决代码

把 ‘.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. Centos6.x安装之后的9件事

    Centos6.x安装之后的9件事 这些不是必须都做的,只不过是我个人的习惯,在此记录一下. 1.修改yum源到国内 CentOS系统更换软件安装源 备份你的原镜像文件,以免出错后可以恢复. mv / ...

  2. VS常用的快捷键

    整理代码          Ctrl+k+f 注释                 Ctrl+k+c 取消注释          Ctrl+k+u 帮助文档          F1 无调试启动     ...

  3. LeetCode-062-不同路径

    不同路径 题目描述:一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为 "Start" ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下 ...

  4. aria2 源码解析专题 —— (二) Exception 部分

    首先声明 Exception 部分的几个异常类的继承关系,如下: 这一版的 Exception 部分只有头文件,没有源文件,所以涉及到的更多的只是定义而已,没有太多实现,所以这一部分也简单说说每个类的 ...

  5. BBS项目分布搭建四(点赞点踩及评论功能准备)

    BBS项目分布搭建四(点赞点踩及评论功能) 1. 点赞点踩样式准备 # 在base.html文件中 head标签内 添加css模块: {% block css %} {% endblock %} # ...

  6. 《Unity shader入门精要》复习<第13章 关于NDC坐标和深度/法线纹理>

    分为三个地方讲解. NDC(Normalize Device Coordinates)归一化的设备坐标 NDC坐标是世界空间坐标通过MVP变换之后再进行归一化得到的坐标.只需要再一步变换就能得到屏幕空 ...

  7. php——字符串的""和null,empty的关系

    public function test(){ $test = ""; if($test==null){ echo "test==null <hr>" ...

  8. How to Rebase Git Branch

    转自:How to Rebase Git Branch (with 3 steps) | Git Rebase | W3Docs Steps to rebasing branch Fetching c ...

  9. SQL注入之PHP+Mysql

    PHP+Mysql(GET方法+数值型+有错误回显)的注入方法 目标系统:PHP+MYSQL(GET方法+数值型+有错误信息) 环境说明: 后台地址:http://ip/cms/admin/login ...

  10. MVC 生成安全验证码(例:用于登陆验证)(转)

    ---------html <td>验证码:</td> <td> <img src="/Login/CheckCode?ID=1" id= ...