首先我们要理解这个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. 删除当前文件夹的bat工具
			
    @echo off:11set /p path=Please enter delete filepath:del /f /s /q %path%rd /q /s %path%goto 11pause
    
			
    2. 
						
  2. 数组中 reduce累计运算
			
    let arr = [1,2,3,4]; let sum = (a, b) => a + b; arr.reduce(sum, 0); 最后输出10
    
			
    3. 
						
  3. windows10 docker 使用以及虚拟机下fastDFS 的使用教程
			
    我们 先来了解下 什么是docker?   Docker的思想来自于集装箱,集装箱解决了什么问题?在一艘大船上,可以把货物规整的摆放起来.并且各种各样的货物被集装箱标准化了,集装箱和集装箱之间不会互相 ...
    
			
    4. 
						
  4. PAT1002 写出这个数  (C++实现)
			
    PAT乙级考试题目 1002 写出这个数 (20 分) 题目要求: 读入一个正整数 n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式: 每个测试输入包含 1 个测试用例,即给出自然数  ...
    
			
    5. 
						
  5. Python实现——决策树实例(离散数据/香农熵)
			
    决策树的实现太...繁琐了. 如果只是接受他的原理的话还好说,但是要想用代码去实现比较糟心,目前运用了<机器学习实战>的代码手打了一遍,决定在这里一点点摸索一下该工程. 实例的代码在使用上 ...
    
			
    6. 
						
  6. ionic3 IPX留海适配
			
    解决:使用 safe-area-inset-top 等 ios 安全区域变量 + meta 标签中设置 viewport-fit=cover https://github.com/pengkobe/r ...
    
			
    7. 
						
  7. php 对象的自定义遍历
			
    php对象的自定义遍历 对手册中的案例进行分析 更好的理解foreach() 的遍历步骤 class myIterator implements Iterator { private $positio ...
    
			
    8. 
						
  8. [CSU1911]Card Game（FWT）
			
    [vjudge-CSU1911] FWT_or #include<cstring> #include<iostream> #include<algorithm> # ...
    
			
    9. 
						
  9. 【DP】+【贪心】【前缀和】洛谷P2893 [USACO08FEB]修路Making the Grade 题解
			
        正常的没想到的DP和玄学贪心. 题目描述 A straight dirt road connects two fields on FJ's farm, but it changes eleva ...
    
			
    10. 
						
  10. 解决页面使用overflow: scroll，overflow-y:hidden在iOS上滑动卡顿的问题
			
    解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题 div{ width: 100%; overflow-y: hidden; -webkit-o ...
    
			
    11.