一、浮动产生原因

一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。

本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了。

简单地说,浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动。

    二、浮动产生负作用

1、背景不能显示

由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。

2、边框不能撑开

如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示

由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

    三、css解决浮动,清除浮动方法

    1、对父级设置适合CSS高度

对父级设置适合高度样式清除浮动,使用设置高度样式,清除浮动产生,前提是对象内容高度要能确定并能计算好。

弊端:必须要知道父元素高度是多少

    2、设置父元素也浮动

弊端:对后续元素会带来位置的影响

    3、父级div定义 overflow:hidden

对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

为什么加入overflow:hidden即可清除浮动呢?那是因为overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动。Css overflow:hidden清除浮动方法DIVCSS5推荐使用。

弊端:如果有内容要以溢出的方式显示的话,也一同被隐藏了。

    4、clear:both清除浮动

在父元素中,追加空子级块级元素,并设置其clear属性值为 both 。

这个css clear清除float产生浮动,可以不用对父级设置高度 也无需技术父级高度,方便适用,但会多加CSS和HTML标签。

    5、利用CSS3新属性完美解决

css样式表中新加:

1
2
3
4
5
    .clear:after{
        content:"";
        display:block;
        clear:both;
                }

然后在需要清除浮动的元素上引入.clear类: class="clear"

此方法几乎没有弊端,推荐使用。

float浮动导致父元素高度坍塌的原因及清除浮动方法的更多相关文章

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

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

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

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

  3. 解决 css 浮动后 父元素高度失效问题

    应用场景 子元素标签使用 浮动后,会出现浮在父元素上层,脱离了.导致父元素没办法根据子元素的高度而变化,提供以下解决方案. 解决代码 把 '.clearfix ' Class 样式添加到 父元素即可. ...

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

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

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

  6. float浮动问题:会造成父级元素高度坍塌;

    float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...

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

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

  8. css float父元素高度塌陷

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

  9. 子div设置float后导致父div无法自动撑开的问题

    子div设置float后会导致父div无法自动撑开 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开. 以下是 ...

随机推荐

  1. Web08_MySQL&JDBC回顾

    数据库操作:DATABASE 查看正在使用的数据库: SELECT DATABASE(); 表操作:TABLE 修改表修改列明 ALTER TABLE 表名 CHANGE 旧列名 新列名 类型(长度) ...

  2. JForum论坛安装以及部署(转)

    链接地址:https://www.cnblogs.com/Amos-Turing/p/7151009.html 下载JForum2.1.9 包手动放到tomcat的webapps下面, 这次打开网址: ...

  3. 转·c语言函数指针的理解与使用

    原文出处:https://www.cnblogs.com/haore147/p/3647262.html 1.函数指针的定义 顾名思义,函数指针就是函数的指针.它是一个指针,指向一个函数.看例子: 1 ...

  4. 剑指Offer总结——用两个栈实现队列

    class Solution { public: void push(int node) { stack2.push(node); } int pop() { if(stack1.empty()){ ...

  5. finreport 截图时间的函数

  6. HTTP 请求消息头部实例:

    HTTP 请求消息头部实例: Host:rss.sina.com.cn        //客户端指定自己想访问的WEB服务器的域名/IP 地址和端口号User-Agent:Mozilla/5.0 (W ...

  7. 第六周作业&实验报告四

    一.实验目的 (1)掌握类的继承 (2)变量的继承和覆盖,方法的继承,重载和覆盖的实现: 二.实验的内容 (1)根据下面的要求实现圆类Circle. 1.圆类Circle的成员变量:radius表示圆 ...

  8. 来自 Vue 3.0 的 Composition API 尝鲜

    来自 Vue 3.0 的 Composition API 尝鲜:https://segmentfault.com/a/1190000020205747

  9. js实现回车键搜索

    前端关键代码: <input type="text" onkeydown="entersearch()" class="form-control ...

  10. 组合&多态&封装

    目录 组合&多态&封装 一.组合 1.1什么是组合 1.2 为什么要用组合 1.3 如何使用组合 1.4 继承和组合都在什么时候用 二.多态与多态性 2.1 什么是多态 2.2 如何用 ...