html代码：
  <body>
        <div class='red'> </div>
        <div class='green'> </div>
        <div class='blue'> </div>
  </body>

浮动特点：
 1.使用浮动时会脱标，被脱标的物体会向上空飘去，不占用正常流的位置，
  此时用的是
         .green{
            float：right
            width:200px
            height:200px
            background-color：green;
             }；

2.浮动会比标准流高出半个级别，可以覆盖标准流中的元素
 此时使用的是
      .green{
            float：left；
            width:200px；
            height:200px；
            background-color：green;
             }；
          向左浮动
 此时，绿色盒子覆盖了蓝色盒子，是因为特点一，绿盒子在空中漂浮由于左边为最边缘，只能向自己的正向位置漂浮；蓝盒子按照正常流向前，所以蓝盒子才被覆盖在绿盒子之下
 

3.浮动找浮动，如果所有盒子都浮动的话，后一个浮动盒子将跟随前一个盒子按照标准流浮动
  css代码：
       div {
           float：left；  
       }

同理，如果整体盒子想右浮动，排列顺序则是蓝、绿、红

4.浮动会受到上面元素的影响
因为第一个盒子本身，是一个块元素，独占一行的特点，导致盒子浮动后不能够到达自己应该到达的位置

解决的方法：将第一个盒子转换为行内块元素即可，将不会受到影响

5.浮动之前，一行将可以显示多个元素  可以为行内元素设置宽、高
以span标签为例子：
     html结构
        <body>
             <span>span标签1 </span>
             <span> span标签2</span>
             <span> span标签3</span>
        </body>

 CSS样式 1.：浮动之前
       span{
          float:left;
          width：200px
          height:200px
          background-color:orange;

           }

   CSS样式 2.：浮动之后
       span{
          width：200px
          height:200px
          background-color:orange;

           }







注意：浮动元素不能通过text-align：center;和margin：0 auto，让浮动元素本身居中，但可以让其内容水平居中




												


											
CS基础 float 浮动的使用方法的更多相关文章
	

    
								
  1. css基础-float浮动
		
    float实现文字环绕图片效果: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
    
		
    2. 
						
  2. CSS 基础 例子 浮动float
		
    一.基本概念 设置了float属性的元素会根据属性值向左或向右浮动,设置了float属性的元素为浮动元素,浮动元素会从普通文档流中脱离,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动元素之后 ...
    
		
    3. 
						
  3. float包裹性与破坏性及清除浮动几种方法
		
    1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响”  学习视频录制推荐的教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内 ...
    
		
    4. 
						
  4. 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？
		
    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...
    
		
    5. 
						
  5. 子级用css float浮动 而父级不能自适应高度解决方法
		
    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...
    
		
    6. 
						
  6. css清除浮动float的几种方法
		
    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...
    
		
    7. 
						
  7. float浮动导致父元素高度坍塌的原因及清除浮动方法
		
        一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内, ...
    
		
    8. 
						
  8. 归纳篇（一）CSS的position定位和float浮动
		
    近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...
    
		
    9. 
						
  9. CSS|  position定位和float浮动
		
    对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 安装本地jar包到仓库
			
    1. 下载并解压 sdk 包本地文件夹下 2. 进入项目目录 执行以下操作之前,先确定 maven 的 settings 文件中 配置的 仓库地址是否为本项目的 仓库地址,如果不是,则会安装到其他仓库 ...
    
			
    2. 
						
  2. Java poi导出设置 Excel某些单元格不可编辑
			
    小白的总结,大神勿喷:需要转载请说明出处,如果有什么问题,欢迎留言 一.需求: 1.某一列 .某一行或某些单元格不可编辑,其他列可以编辑 二.期间遇到的问题 1.无法设置成不可编辑 2.设置为不可编辑 ...
    
			
    3. 
						
  3. 【C/C++】编码（腾讯）
			
    假定一种编码的编码范围是a ~ y的25个字母,从1位到4位的编码,如果我们把该编码按字典序排序,形成一个数组如下: a, aa, aaa, aaaa, aaab, aaac, - -, b, ba, ...
    
			
    4. 
						
  4. 持续部署CI/CD
			
    一.简介 在敏捷开发时,通常将服务进行拆分成不同模块,每个开发小组负责一个模块的开发,会在一天内对这个模块进行频繁的提交到仓库主干并部署到线上.CI/CD就是在开发中使用工具保证快速并稳定上线的方法, ...
    
			
    5. 
						
  5. 编译工具sbt部署
			
    目录 一.简介 二.部署 三.测试 一.简介 项目构建工具是项目开发中非常重要的一个部分,充分利用好它能够极大的提高项目开发的效率.在学习SCALA的过程中,我遇到了SBT(Simple Build  ...
    
			
    6. 
						
  6. 第46篇-signature_handler与result_handler
			
    在之前介绍为native方法设置解释执行的入口时介绍过,当Method::native_function为空时会调用InterpreterRuntime::prepare_native_call()函 ...
    
			
    7. 
						
  7. 为什么众多软件厂商无法提供APS高级计划排程系统？工厂目前生产计划是怎么排产的？
			
    一.行业现状如想了解一下目前现状,去考察一下上了ERP的企业,会发现一个有趣的现象该企业无论ERP软件搞得如何如火如荼,似乎都与生产调度人员无关. 车间里或者生产线上的生产作业计划.生产过程的调度和管 ...
    
			
    8. 
						
  8. LuoguP3932 浮游大陆的68号岛 题解
			
    Content 在一个无限长的数轴上有 \(n\) 个点.第 \(i\) 个点上面有 \(a_i\) 件物品,且第 \(i\) 个点到第 \(i+1\) 个点的距离为 \(b_i\). 定义从第 \( ...
    
			
    9. 
						
  9. CF248A Cupboards 题解
			
    Content 在一个走廊上有 \(2n\) 扇门,排成两列分居左右.有个人很无聊,随意地开关了一些门,使得这些门看起来十分乱.现在请开关一些门,使得这些门恢复原来整齐的状态(要么都开.要么都关.要么 ...
    
			
    10. 
						
  10. java面向对象类的继承~ 匿名类 ；多态特性；强制类型转换
			
    类的继承 创建子类语法:     修饰符 class 子类名 extends 父类名{        } 匿名子类语法: 直接实例化,过程中通过匿名类 继承父类,在实例化过程中将子类匿名 <父类 ...
    
			
    11.