首先我们要理解这个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. unix网络编程 str_cli epoll 非阻塞版本
			
    unix网络编程 str_cli epoll 非阻塞版本 unix网络编程str_cli使用epoll实现讲了使用epoll配合阻塞io来实现str_cli,这个版本是配合非阻塞io. 可以看到采用非 ...
    
			
    2. 
						
  2. 「TJOI2015」线性代数
			
    题目链接 戳我 \(Describe\) 题目描述 为了提高智商,\(ZJY\)开始学习线性代数.她的小伙伴菠萝给她出了这样一个问题:给定一个\(n×n\)的矩阵\(B\)和一个\(1×n\)的矩阵\ ...
    
			
    3. 
						
  3. linux系统使用sh文件传参数给matlab程序
			
      linux系统下使用sh文件传参数给matlab程序 (1)编写sh文件 程序以下面的行开始(必须在文件的第一行):   #!/bin/sh 定义需要传递的参数,用双引号引起,参数之间使用逗号或分 ...
    
			
    4. 
						
  4. Druid连接池默认配置和坑
			
    一.公司默认配置 ds_0: !!com.alibaba.druid.pool.DruidDataSource driverClassName: com.mysql.jdbc.Driver url:  ...
    
			
    5. 
						
  5. DISCUZ  各数据库表作用
			
    链接原文:http://forum.digitser.cn/forum.php?mod=viewthread&tid=179 DISCUZ数据字典               http://w ...
    
			
    6. 
						
  6. 导出当前python安装了哪些第三方模块+批量安装python模块
			
    pip freeze > mokuai.txt  #导出你当前python环境里面有哪写第三方模块 pip install -r mokuai.txt #从文件里面批量安装模块
    
			
    7. 
						
  7. C# Winform下一个热插拔的MIS/MRP/ERP框架（多语言方案）
			
    个别时候,我们需要一种多语种切换方案. 我的方案是这样的: 1.使用文本文本存储多语言元素,应用程序启动时加载到内存表中: 2.应用程序启动时从配置文件加载语种定义: 3.所有窗体继承自一个Base基 ...
    
			
    8. 
						
  8. 期待suqingnian.h
			
    不定期更新,跟着自己的进度走的. 有什么好的东西可以收录的尽管留言 UPD:话说真的没人发现本宝宝的$Martix$类的$operator$打错了么?$qwq$ $2018.7.19$ /*by Qi ...
    
			
    9. 
						
  9. PyCharm4.5.4注册码
			
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 name : newasp == ...
    
			
    10. 
						
  10. Javascript 上传文件到Azure存储
			
    对一些前端工程师来讲,使用javascript上传文件到Azure存储中可能是需要掌握的技能,希望这篇博客能给到帮助. 在开始前我们需要了解以下几点: 共享访问签名(Shared Access Sig ...
    
			
    11.