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. 为Python的web框架编写前端模版的教程
			
    虽然我们跑通了一个最简单的MVC,但是页面效果肯定不会让人满意. 对于复杂的HTML前端页面来说,我们需要一套基础的CSS框架来完成页面布局和基本样式.另外,jQuery作为操作DOM的JavaScr ...
    
			
    2. 
						
  2. zookeeper 异常  ：stat is not executed because it is not in the whitelist. Connection closed b
			
    1 .问题 1.启动 zookeeper 后 用指令:  telnet 127.0.0.1 2181 连接 提示输入指令 :stat 后报错,然后关闭连接 2.问题解决: 修改启动指令 zkServe ...
    
			
    3. 
						
  3. grep命令输出显示高亮字
			
    grep命令执行后,终端上输出显示颜色可以加"--color=auto"的参数. 另外的两个办法是: 1.设置环境变量: export GREP_OPTIONS="--c ...
    
			
    4. 
						
  4. ActiveMQ（一）——简介
			
    一.ActiveMQ简介 ActiveMQ是什么ActiveMQ是Apache推出的,一款开源的,完全支持JMS1.1和J2EE1.4规范的JMS Provider实现的消中间件(MOM) Activ ...
    
			
    5. 
						
  5. ssm+ajax实现登陆
			
    ssm的搭建见上一章 1.数据协议层 public User selectByLoginnameAndPassword(@Param("loginname")String logi ...
    
			
    6. 
						
  6. 【Matlab】向图像域添加噪声/高斯/均匀/伽马/指数/椒盐
			
    [向图像域添加噪声] matlab自带一个函数:imnoise,可以对图像添加噪声. Matlab的说明 https://www.mathworks.com/help/images/ref/imnoi ...
    
			
    7. 
						
  7. Taro 微信小程序 上传文件到minio
			
    小程序前端上传文件不建议直接引用minio的js npm包,一来是这个包本身较大,会影响小程序的体积,二来是ak sk需要放到前端存储,不够安全,因此建议通过请求后端拿到签名数据后上传. 由于小程序的 ...
    
			
    8. 
						
  8. Excel如何使用VLOOKUP函数多条件匹配查找数据
			
    一.对应源数据如sheet6所示,对应需查找的数据如sheet7所示 二.在sheet6中添加一列辅助列 三.在sheet7对应位置插入vlookup函数 四.最终结果如下图所示
    
			
    9. 
						
  9. [BUUCTF]REVERSE——[ACTF新生赛2020]usualCrypt
			
    [ACTF新生赛2020]usualCrypt 附件 步骤: 例行检查,无壳,32位程序 32位ida载入,直接看main函数 逻辑很简单,一开始让我们输入一个字符串,然后该字符串经过sub_4010 ...
    
			
    10. 
						
  10. 选课系统V1.0
			
    tree . . ├── bin │   ├── __init__.py │   └── start.py #启动文件 ├── conf │   ├── __init__.py │   └── set ...
    
			
    11.