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. velocity示例
			
    创建maven项目 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns ...
    
			
    2. 
						
  2. web管理的Powerdns
			
    在powerdns服务器上安装相应的包(基于epel源) [root@powerdns ~]# yum install pdns pdns-backend-mysql -y 在master-maira ...
    
			
    3. 
						
  3. Oracle 表结构管理
			
    表其实是数据的'容器'.oracle有几种类型的表: 普通表(ordinary table)又叫堆组织表. 聚簇表(clustered table) 分区表(partition table) 外部表( ...
    
			
    4. 
						
  4. 【Linux】【Services】任务计划、周期性任务执行
			
    Linux任务计划.周期性任务执行       未来的某时间点执行一次某任务:at, batch     周期性运行某任务:crontab         执行结果:会通过邮件发送给用户        ...
    
			
    5. 
						
  5. 【Linux】【Basis】磁盘分区
			
    1. Linux磁盘及文件系统管理 1.1. 基本概念: 1.1.1. 磁盘接口类型: IDE(ata):并口,133MB/s,设备/dev/hd[a-z] SCSI:并口,Ultrascsi320, ...
    
			
    6. 
						
  6. 前端两大框架 vue 和 react 的区别
			
    1. 设计思想 vue: vue的官网介绍说vue是一种渐进式框架,采用自底向上增量开发的设计: react: 采用函数式编程,推崇纯组件,数据不可变,单向数据流: 2. 编写语法 vue: 采用单文 ...
    
			
    7. 
						
  7. AOP切入点的配置
			
    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...
    
			
    8. 
						
  8. python中的虚拟环境（在jupyter和pycharm中的使用）
			
    1.通过anaconda新建虚拟环境 创建虚拟环境:conda create -n your_env_name python=3.6 激活虚拟环境:activate your_env_name(虚拟环 ...
    
			
    9. 
						
  9. HBuilderX无法启动微信小程序？仅三步
			
    1.复制微信开发者工具启动路径 : "C:\Program Files (x86)\Tencent\微信web开发者工具\微信web开发者工具.exe" 不要后面的 "微 ...
    
			
    10. 
						
  10. GaussDB(DWS)中共享消息队列实现的三大功能
			
    摘要:本文将详细介绍GaussDB(DWS)中共享消息队列的实现. 本文分享自华为云社区<GaussDB(DWS)CBB组件之共享消息队列介绍>,作者:疯狂朔朔. 1)共享消息队列是什么? ...
    
			
    11.