首先我们要理解这个flaot 为什么要清除,作为小白来说直接颠覆了我之前学的内容,因为之前学的东西虽然碰到float后,脱离文档流后给兄弟元素或者父元素造成影响,但是都是通过option来定位 要么绝对 要么相对 ,都是能解决的.

      这个概念才理解的时候,我都想为什么要清除,我都设置了还要清除干嘛?

后来知道 这个清除float 并不是把自身浮动清除,而是相对与前后兄弟标签来说的,也可能相对父级标签;

下面来解释一下:
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    .div1{

        width: 90px;

        height: 90px;

        background-color: steelblue;

        border: 1px red solid;

    }

</style>

<body>

    <div style="background-color: gold; border: 1px solid red;">

        <div class="div1">标签1</div>

        <div class="div1">标签2</div>

        <div class="div1">标签3</div>

        <div class="div1">标签4</div>

        <!--<div style="clear: both; "></div>-->

    </div>

</body>

</html>











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





　　






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








就是在底部加入了行标签 ,关键是里面的CSS,clear:both;

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









还有另外一种方法:




												


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

    
								
  1. CSS清除浮动的方法
		
    CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...
    
		
    2. 
						
  2. 前端开发CSS清除浮动的方法有哪些？
		
    在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动 ...
    
		
    3. 
						
  3. css清除浮动的方法汇总
		
    这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...
    
		
    4. 
						
  4. 8种CSS清除浮动的方法优缺点分析
		
    为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...
    
		
    5. 
						
  5. CSS清除float浮动
		
    一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在 ...
    
		
    6. 
						
  6. CSS清除浮动各种方法
		
    当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现 ...
    
		
    7. 
						
  7. css清除浮动的方法总结
		
    在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下     清除浮动是每一个 we ...
    
		
    8. 
						
  8. css清除浮动各方法与原理
		
    说到清除浮动的方法,我想网络上应该有不下7,8的方法,介绍这些方法之前,想下为什么清除浮动? 再次回到float这个属性,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联 ...
    
		
    9. 
						
  9. CSS清除浮动的方法及优缺点
		
    浮动是CSS布局里面用的比较多的属性.浮动的框向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 因为浮动会使当前元素产生向上浮的效果,所以浮动的元素会脱离正常的文档流,它包围的内容在 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. orleans 2.0 教程之-----官方文档翻译,给大家学习ol一个参考
			
    本人也是英文盲,翻译不对的地方请谅解.由于翻译内容较多,会慢慢更新 orleans简称ol,一些专用词不做翻译.先决条件,读这表文章之前需要了解:actor,es,cqrs 参考链接: https:/ ...
    
			
    2. 
						
  2. 「BZOJ 5188」「Usaco2018 Jan」MooTube
			
    题目链接 luogu bzoj \(Describe\) 有一个\(n\)个节点的树,边有权值,定义两个节点之间的距离为两点之间的路径上的最小边权 给你\(Q\)个询问,问你与点\(v\)的距离大于等 ...
    
			
    3. 
						
  3. 八、Node.js-http模块
			
    JS代码如下: /* 如果我们使用PHP来编写后端的代码时,需要Apache 或者 Nginx 的HTTP 服务器,并配上 mod_php5 模块和php-cgi,来处理客户端的请求相应. 不过对 N ...
    
			
    4. 
						
  4. openfiler的介绍与使用
			
    一. Openfiler简介 Openfiler 能把标准x86/64架构的系统变成一个强大的NAS.SAN存储和IP存储网关,为管理员提供一个强大的管理平台,并能能应付未来的存储需求.依赖如VMwa ...
    
			
    5. 
						
  5. web静态资源的访问(笔记)
			
    1.在web-inf外的静态资源访问: 三种方式: 2.访问web-inf内的静态资源: 使用请求转发的方式访问web-inf静态资源(重定向相当于在浏览器输入,无法访问) 参考:https://bl ...
    
			
    6. 
						
  6. SHTSC2017酱油记
			
    考完回来累成狗..睡了一觉..补游记.. DAY0 把最近刷的题发了下题解..NOIP RK10的蒟蒻收拾收拾准备退役了.. 12点就睡了..很久周五没这么早睡了.. DAY1 9点就醒了..莫名紧张 ...
    
			
    7. 
						
  7. python 面向对象十一 super函数
			
    python 面向对象十一 super函数   super函数用来解决钻石继承. 一.python的继承以及调用父类成员 父类: class Base(object): def __init__(se ...
    
			
    8. 
						
  8. luoguP4868 Preprefix sum
			
    https://www.luogu.org/problemnew/show/P4868 线段树上加等差数列,基础区间修改单点查询 等差数列具有可加性,当在同一段区间内时,首项相加公差相加即可 #inc ...
    
			
    9. 
						
  9. (转)win7英文目录和中文目录，文件夹的别名
			
    win7英文目录和中文目录,文件夹的别名 在使用win7的很多目录例如我的文档.我的音乐等目录,你会发现文件夹是中文名的,路径也是中文的.但这个不是真的路径.点击一下地址栏,就可以看到真实路径了. 这 ...
    
			
    10. 
						
  10. 在pycharm中使用指定的虚拟环境virtualenv
			
    第一步 建立虚拟环境 cmd下: pip install virtualenv 创建虚拟环境目录 env 第二步:激活虚拟环境 进入虚拟环境下的script目录 第三步:创建一个flask文件夹并打开 ...
    
			
    11.