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. 设置linux下oracle开机自启动
			
    1.修改配置文件,vi /etc/oratab orcl:/u01/app/oracle/product/11.2.0/db_1:Y 2.创建启动文件,/etc/init.d/ #!/bin/sh # ...
    
			
    2. 
						
  2. Linux上用Jexus部署Asp.Net网站：常规部署与Docker部署
			
    (一)常规部署 一.把 jexus压缩包下载到linux临时文件夹中. cd /tmp wget linuxdot.net/down/jexus-6.2.x-arm64.tar.gz (不同的操作系统 ...
    
			
    3. 
						
  3. springmvc中文件跨服务器传输的方法
			
    //1.首先在tomcat的新端口上重新开启一个tomcat服务器fileuploadserver服务器,并且在webapps下新建一个uploads文件夹 //2.在业务服务器上书写前端页面和后端的 ...
    
			
    4. 
						
  4. 【力扣】188. 买卖股票的最佳时机 IV
			
    给定一个整数数组 prices ,它的第 i 个元素 prices[i] 是一支给定的股票在第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你最多可以完成 k 笔交易. 注意:你不能同时参 ...
    
			
    5. 
						
  5. Java定时器演进过程和生产级分布式任务调度ElasticJob代码实战
			
    为何要使用分布式任务调度 **本人博客网站 **IT小神 www.itxiaoshen.com 演示项目源码地址** https://gitee.com/yongzhebuju/spring-task ...
    
			
    6. 
						
  6. idea开发环境搭建ssh
			
    idea2020完整web开发(struts2+spring+hibernate) idea破解 第一步: 下载最新的 IDEA 2020.3.2 版本安装包 https://www.jetbrain ...
    
			
    7. 
						
  7. 使用plantuml，业务交接就是这么简单
			
    使用plantuml,业务交接就是这么简单 你好,我是轩脉刃. 最近交接了一个业务,原本还是有挺复杂的业务逻辑的,但发现交接过来的项目大有文章,在项目代码中有一个docs文件夹,里面躺着若干个 pum ...
    
			
    8. 
						
  8. 搭建直接通过CPU执行汇编语言的环境
			
    搭建直接通过CPU执行汇编语言环境 我们通过编译写好的汇编语言代码可以生成.bin的机器语言二进制代码.但是这个.bin程序我们该如何运行呢? 这里其实有两个办法: 1: 将其作为一个Windows/ ...
    
			
    9. 
						
  9. GSS API
			
    Detail:http://docs.oracle.com/cd/E24847_01/html/E22200/overview-61.html GSS-API 介绍 使用 GSS-API,程序员在编写 ...
    
			
    10. 
						
  10. .net 6 (.net core) 发布到linux docker中
			
    第一步:VMware 安装 虚拟机Linux系统,本文以 CentOS 为例 .
    
			
    11.