解决 css 浮动后 父元素高度失效问题
应用场景
子元素标签使用 浮动后,会出现浮在父元素上层,脱离了。导致父元素没办法根据子元素的高度而变化,提供以下解决方案。
解决代码
把 ‘.clearfix ’ Class 样式添加到 父元素即可。
.clearfix:after,
.clearfix:before{content:" ";display:table;}
.clearfix:after{clear:both;}
解决 css 浮动后 父元素高度失效问题的更多相关文章
- float浮动导致父元素高度坍塌的原因及清除浮动方法
一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内, ...
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- 关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案
以下是个人学习笔记,仅供学习参考. 1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题. 在给没有margin-top-b ...
- css 添加伪元素 消除浮动 对父元素高度产生的影响
- HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗)
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
- 解决float浮动带来的父元素高度没有的问题---清除浮动
float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...
- 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法
内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...
- CSS浮动布局带来的高度塌陷以及其解决办法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- css float父元素高度塌陷
css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...
随机推荐
- sprintf的用法总结
大概知道sprintf的用法,今天在CSDN上看到一篇关于sprintf比较好的总结,现在抄下来,emmmmmmm....... srpintf()函数的功能非常强大:效率比一些字符串操作函数要高:而 ...
- tp5 全选,全不选 ,ajax批量删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- linux php 环境word转pdf、excel转pdf、office转pdf
最近项目中遇到一个需求,将word.excel文件转换成pdf,并且打上水印,我利用的是libreoffice,这个需要Java 的jdk环境.废话不多说,开撸 1.在linux上搭建jdk环境 文章 ...
- Docker-compose 搭建 Harbor私有仓库
一. 安装docker-compose 1. 下载docker-compose的最新版本 curl -L "https://github.com/docker/compose/release ...
- Linux内核升级修复系统漏洞-RHSA-2017:2930-Important: kernel security and bug fix update
公司使用的阿里云服务器(Centos7.4 x86_64bit)内核版本为:3.10.0-693.21.1.el7.x86_64, 2019年3月4日 02:07:58通过云盾安骑士-->漏洞管 ...
- 5月28日 python学习总结 CSS学习(二)
CSS属性相关 宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. 字体属性 文字字体 font-family可以把多 ...
- Discuz!X系列全版本后台sql注入复现
圈子某位大佬公布的0day,拿来刷一刷,漏洞分析请移步大佬文章.大佬链接 0x01 环境准备 1.首先去码云下载最新版本的discuz(DiscuzX 3.4 R20191201). 2.将upaod ...
- python 多ip端口扫描器
from socket import * import threading #导入线程相关模块 import re # qianxiao996精心制作 #博客地址:https://blog.csdn. ...
- WAF绕过的各种姿势
主要思路: 根据WAF部署位置,针对WAF.WEB服务器.WEB应用对协议解析.字符解析.文件名解析.编码解析以及SQL语法解析的差异,绕过WAF,将payload送至服务器执行. 常用绕过方法: 1 ...
- JavaScript 函数 (一 JavaScript 函数的声明与使用)
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. JavaScript 函数的声明与使用 实例 <!DOCTYPE html> <html> <head> ...