首先我们要理解这个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. excel文档中嵌入对象(excel、word等)
			
    //测试环境office2016.office365 string InsertPath= @"E:\\新建文件夹\\2.xls";//插入的文档路径 string openfil ...
    
			
    2. 
						
  2. Window 7 Professional 多语言设置
			
    1. 正常情况下,WINDOW系统只提供企业和旗舰版的语言切换的界面设置,其他版本没有. 2. 首先下载语言包,然后解压待用. 3. 以管理员身份运行命令窗口,如下输入: 4. 上面完成后,下载 ht ...
    
			
    3. 
						
  3. 在成员函数中调用虚函数（关于多态的注意事项）------新标准c++程序设计
			
    类的成员函数之间可以互相调用.在成员函数(静态成员函数.构造函数和析构函数除外)中调用其他虚成员函数的语句是多态的.例如: #include<iostream> using namespa ...
    
			
    4. 
						
  4. npm更换为镜像
			
    背景:npm在安装的过程中需用从国外的网站获取代码,速度非常慢,因此更换为淘宝镜像,提升速度. 1.永久起作用: npm config set registry https://registry.ta ...
    
			
    5. 
						
  5. JavaScript 错误监控Fundebug
			
    https://www.fundebug.com/ 等待接收错误 请先将Fundebug插件集成到您的应用中 测试插件 为验证集成是否成功,请在浏览器的控制台执行以下命令: fundebug.noti ...
    
			
    6. 
						
  6. CentOS6 系统下升级python后yum命令使用时报错
			
    CentOS6 系统下升级python后yum命令使用时报错,如下: [root@xxxxxxx]#yumFile"/usr/bin/yum",line30exceptKeyboa ...
    
			
    7. 
						
  7. node.js安装以及git 的使用说明
			
     第一步:安装node.js: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.   Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高 ...
    
			
    8. 
						
  8. Java面向对象之多态（成员访问特点）   入门实例
			
    一.基础概念 多态的调用方式在子父类中的特殊体现. 1.访问成员变量特点: 当子父类中出现同名成员变量时. 多态调用时,编译和运行都参考引用型变量所属的类中的成员变量. 即编译和运行看等号的左边. 2 ...
    
			
    9. 
						
  9. CentOS安装pip并修改源为豆瓣源
			
    使用yum进行安装 yum install python-pip 若出现 No package python-pip available. 则解决方法如下: yum -y install epel-r ...
    
			
    10. 
						
  10. C++_新特性1-类型转换运算符
			
    C++的创始人认为C语言的类型转换运算符太过于松散.他采取了更加严格的限制允许的类型转换.并添加了4个类型转换运算符. 这部分特性比较高阶,我把它归于奇技淫巧的范畴.这里简单介绍一下,以后实际有用到再 ...
    
			
    11.