1.       首先我们要理解这个flaot 为什么要清除,作为小白来说直接颠覆了我之前学的内容,因为之前学的东西虽然碰到float后,脱离文档流后给兄弟元素或者父元素造成影响,但是都是通过option来定位 要么绝对 要么相对 ,都是能解决的.
  2.       这个概念才理解的时候,我都想为什么要清除,我都设置了还要清除干嘛?
  3. 后来知道 这个清除float 并不是把自身浮动清除,而是相对与前后兄弟标签来说的,也可能相对父级标签;
  4.  
  5. 下面来解释一下:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <style>
  8.     .div1{
  9.         width: 90px;
  10.         height: 90px;
  11.         background-color: steelblue;
  12.         border: 1px red solid;
  13.  
  14.     }
  15. </style>
  16. <body>
  17.     <div style="background-color: gold; border: 1px solid red;">
  18.         <div class="div1">标签1</div>
  19.         <div class="div1">标签2</div>
  20.         <div class="div1">标签3</div>
  21.         <div class="div1">标签4</div>
  22.         <!--<div style="clear: both; "></div>-->
  23.     </div>
  24. </body>
  25. </html>
  1.  
  1.  

  1. 因为DIV是块级标签很DIAO的,全部自成一行,如果想在标签一后后面直接跟上div1就要加入float:left;

　　

  1. 结果出现的情况是因为原来的父级DIV标签没有设置高度导致高度坍塌,全部脱离文档流后没有东西能撑起高度.原来的边框也就是一条线了!

  1. 就是在底部加入了行标签 ,关键是里面的CSS,clear:both;
  2. 他会清除里面所有的兄弟标签的float:left的属性,父级标签也撑起来了,所有的标签1 2 3 4都按左依次排列. 这个方法即让元素按设定浮动,又没有损害父类的高度.可以随着内部标签的增加,父级标签自动的填满背景,不坍塌.结果如下:

  1. 还有另外一种方法:

css 清除float的方法的更多相关文章

  1. CSS清除浮动的方法

    CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...

  2. 前端开发CSS清除浮动的方法有哪些？

    在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动 ...

  3. css清除浮动的方法汇总

    这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...

  4. 8种CSS清除浮动的方法优缺点分析

    为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...

  5. CSS清除float浮动

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

  6. CSS清除浮动各种方法

    当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现 ...

  7. css清除浮动的方法总结

    在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下     清除浮动是每一个 we ...

  8. css清除浮动各方法与原理

    说到清除浮动的方法,我想网络上应该有不下7,8的方法,介绍这些方法之前,想下为什么清除浮动? 再次回到float这个属性,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联 ...

  9. CSS清除浮动的方法及优缺点

    浮动是CSS布局里面用的比较多的属性.浮动的框向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 因为浮动会使当前元素产生向上浮的效果,所以浮动的元素会脱离正常的文档流,它包围的内容在 ...

随机推荐

  1. java设计模式 策略

    什么是策略设计模式? 世界永远都在变,唯一不变的就是变本身 举个生活中的例子,小时候玩的游戏中,Sony的PSP提供了统一的卡槽接口,玩家只要更换卡带就可以达到更换游戏的目的,做到了一机多用 特工执行 ...

  2. 趣图：快下班了，剩一个bug，修复一下再走

      趣图:当我给老板展示我修复了那个 bug 时 趣图:当我以为这是最后一个Bug时……

  3. JavaWeb应用中初始化Log4j的两种方式

    本文主要介绍了普通JavaWeb应用(基于Tomcat)中初始化Log4j的两种方式: 1.通过增加 InitServlet ,设置令其自启动来初始化 Log4j . 2.通过监听器 ServletC ...

  4. Scala详细环境安装与配置

    https://blog.csdn.net/free356/article/details/72911898 系统为windows.安装配置Scala如下: 一,安装Scala 1,java6以上(建 ...

  5. 月薪3万+的大数据人都在疯学Flink，为什么？

    身处大数据圈近5年了,在我的概念里一直认为大数据最牛的两个东西是Hadoop和Spark.18年下半年的时候,我突然发现身边很多大数据牛人都是研究学习Flink,甚至连Spark都大有被冷落抛弃的感觉 ...

  6. C#中调用SAPI实现语音识别的2种方法

    通过微软的SAPI,不仅仅可以实现语音合成TTS,同样可以实现语音识别SR.下面我们就介绍并贴出相关代码.主要有两种方式: 1.使用COM组件技术,不管是C++,C#,Delphi都能玩的转,开发出来 ...

  7. 【语义分割】PSPNet中PSP模块的pytorch实现

    github地址:https://github.com/Lextal/pspnet-pytorch/blob/master/pspnet.py PSP模块示意图如下 代码如下 class PSPMod ...

  8. PHP 备份还原 MySql 数据库

    原生 PHP 备份还原 MySql 数据库 支持 MySql,PDO 两种方式备份还原 php5.5 以上的版本建议开启pdo扩展,使用 pdo 备份还原数据 备份文件夹 db_backup.impo ...

  9. 权限管理系统源码分析（ASP.NET MVC 4.0 + easyui + EF6.0 + MYSQL/MSSQLSERVER +微软企业库5.0+日志绶存）

    系统采用最先进技术开发: (ASP.NET MVC 4.0 + easyui + EF6.0 + MYSQL/MSSQLSERVER +微软企业库5.0+日志绶存) 大家可以加我QQ讨论 309159 ...

  10. HihoCoder - 1044 状压DP 初步

    本题主要难在状态的转移 定义\(dp[i][j]:\)前\(i\)个中\(j\)集合范围内的最优解 \(j\)定义为\(p_1,p_2,...,p_{m-1}\),若第\(i-j+1\)个选定,则\( ...