首先我们要理解这个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. SKU：唯一标识填什么
			
    策略 随意填写 只要别和别人重复就好 ,不过重复你也创建不了. 最好填与APP信息相关的,比如直接填写bundle ID 上去...跟套装ID保持一致. 你新建应用的时候都还没有APP ID 你怎么填 ...
    
			
    2. 
						
  2. python-输入
			
    1. python2版本中 咱们在银行ATM机器前取钱时,肯定需要输入密码,对不? 那么怎样才能让程序知道咱们刚刚输入的是什么呢?? 大家应该知道了,如果要完成ATM机取钱这件事情,需要先从键盘中输入 ...
    
			
    3. 
						
  3. HTML5新增的表单元素有哪些？
			
    表单控:color ,  calendar  ,  date ,  datetime, datetime-local,  time, mouth , week, email, url , search ...
    
			
    4. 
						
  4. leecode刷题（3）-- 旋转数组
			
    leecode刷题(3)-- 旋转数组 旋转数组 给定一个数组,将数组中的元素向右移动 K 个位置,其中 K 是非负数. 示例: 输入: [1,2,3,4,5,6,7] 和 k = 3 输出: [5, ...
    
			
    5. 
						
  5. 题解 P2960 【[USACO09OCT]Milkweed的入侵Invasion of the Milkweed】
			
    题目链接 首先这道题是一道经典的BFS.非常适合刚刚学习深搜的同学. 现在分析一下这个问题.首先,每周是八个方向.就是一圈. 也就是说入侵的范围关于时间是成辐射型扩散.让求最大时间. 也就是完美的BF ...
    
			
    6. 
						
  6. docker 安装 postgresql
			
    docker拉去镜像以及配置生成容器的步骤几乎和之前的nginx安装一样,直接写下面的命令了 1. docker pull postgres 2. docker run --name xf-postg ...
    
			
    7. 
						
  7. Idea 软件使用快捷键归纳
			
    <1>CTRL+P   方法参数提示 <2>ctrl+/ 单行注释 <3>Ctrl+Alt+M  IDEA 重复代码快速重构(抽取重复代码快捷键) <4> ...
    
			
    8. 
						
  8. C++_异常5-异常规范和栈解退
			
    异常规范 异常规范的理念看似有前途,但实际的使用效果并不好. 忽视异常规范之前,您至少应该知道它是什么样的,如下所示: double harm(double a) throw(bad_thing);  ...
    
			
    9. 
						
  9. LeetCode4. 两个排序数组的中位数
			
    4. 两个排序数组的中位数 问题描述 There are two sorted arrays nums1 and nums2 of size m and n respectively.Find the ...
    
			
    10. 
						
  10. pscp 命令---windows和linux之间互相拷贝文件的工具
			
    pscp -r d:\cc root@10.0.0.8:/root/test copy d:\cc content recursively into the /root/test, contains  ...
    
			
    11.