1. float 浮动

    1.1 在 CSS 中，任何元素都可以浮动。

    1.2 浮动元素会生成一个块级框，而不论它本身是何种元素。

    1.3 关于浮动的两个特点：

        浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

        由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

    1.4 三种取值：left向左浮动；right向右浮动；none默认值，不浮动    

    详情：https://www.w3school.com.cn/css/css_positioning_floating.asp

    示例：

        <body>

            <div class="c1"></div>

            <div class="c2"></div>

        </body>

    CSS:    *{margin:0px;}   /*浏览器默认margin是8px，设置为0px，让背景色布满页面*/

        .c1{

                width:200px;

                height:500px;

                background-color:red;

                float:left

            }

        .c2{

                width:200px;

                height:500px;

                background-color:green;

                float:left

            }

        上面两元素都是向左浮动，效果是并排在一起。


2. clear 清除浮动

    1. clear属性规定元素的哪一侧不允许其他浮动元素。clear属性只会对自身起作用，而不会影响其他元素。

    值        描述

    left        在左侧不允许浮动元素。

    right        在右侧不允许浮动元素。

    both        在左右两侧均不允许浮动元素。

    none        默认值。允许浮动元素出现在两侧。

    inherit        规定应该从父元素继承 clear 属性的值。

        div{clear:left}

    2. 清除浮动

        2.1 浮动的副作用是父标签塌陷，所以要清除浮动。

        2.2 主要有三种方式：

            固定高度

            伪元素清除法

            overflow:hidden

        2.3 伪元素清除法（使用较多）：

            .clearfix:after {

                  content: "";

                  display: block;

                  clear: both;

                    }
  　
     3. 示例1：没清除浮动的情况下，id="d1"和class="c2"的两标签是同级，应该各占浏览器的一行，但如果没有清除浮动，他们只能在同一行里面。
　　　　　　　　这个时候父标签也就是红色的边框已经塌陷了（看下图），因为4个色块从边框里面跑出来了，边框里面没有内容，没办法把边框撑起来。
  <body>
      <div id="d1">
           <div class="c1"></div>
           <div class="c1"></div>
           <div class="c1"></div>
           <div class="c1"></div>
      </div>
       <div class="c2">我是div</div>
  </body>
  
  #d1{
       border:5px red solid
   }
  .c1{
       width:50px;
       height:50px;
       border:1px deepskyblue solid;
       background:green;
       float:left;　　/*4个色块向左浮动*/
   }
  .c2{
       background:greenyellow;
   }
      4. 示例2：伪元素清除法：清除浮动。父类标签添加class="clearfix"
   <body>
       <div id="d1" class="clearfix">
            <div class="c1"></div>
            <div class="c1"></div>
            <div class="c1"></div>
            <div class="c1"></div>
       </div>
        <div class="c2">我是div</div>
   </body>
   #d1{
        border:5px red solid
    }
   .c1{
        width:50px;
        height:50px;
        border:1px deepskyblue solid;
        background:green;
        float:left;
    }
   .clearfix:after{
        content:""; /*父标签后面不添加内容*/
        display:block; /*布满整个页面宽度*/
        clear:both; /*清除左右浮动*/
    }
   .c2{
        background:greenyellow;
    }
3. overflow溢出属性

    值        描述

    visible        默认值。内容不会被修剪，会呈现在元素框之外。

    hidden        内容会被修剪，并且其余内容是不可见的。

    scroll        内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

    auto        如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

    inherit        规定应该从父元素继承 overflow 属性的值。

    overflow（水平和垂直均设置）

    overflow-x（设置水平方向）

    overflow-y（设置垂直方向

    示例1：圆头头像

        <body>

                <div>

                    <img src="1.jpg" alt="">

                </div>

        </body>

        div{

                width:200px;

                height:100px;

                border:1px red solid;

               border-radius:30%;  /*边框四边圆角，如果边框长宽一样，100%就是圆形*/

                overflow:hidden; /*把边框外面的图片边角隐藏了，不然就挡住了边框*/

            }

        img{

                max-width:100%;  /*图片最大宽度是父类标签边框的100%，不然就会溢出*/

            }


    示例2：滚动条

        <div>

                海燕

                在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕就像一道闪电，高傲的飞翔

            </div>

        div{

                width:100px;

                height:100px;

                border:1px red solid;

                overflow:auto;

            }



												


											
day68-CSS-float浮动，clear清除浮动，overflow溢出的更多相关文章
	

    
						
  1. 浮动（float）与清除浮动（clear）
		
    上一篇中我们了解了块级元素与内联元素,今天将自己查阅的资料整理写出来,与大家一起理解什么是浮动,以及怎样清除浮动,本文以div元素为例. 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮 ...
    
		
    2. 
						
  2. CSS基础（float属性与清除浮动）
		
    3.8 这是CSS里比较重要的属性:浮动,这个属性会在以后经常用到,算是一个重点吧 浮动 语法:float:left  |  right  |  none 特点: 浮动的元素不占位置,脱离了标准文档流 ...
    
		
    3. 
								
  3. float闭合（清除浮动）和CSS HACK
		
    一.float 闭合(清除浮动) 将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽. <style>.c ...
    
		
    4. 
						
  4. CSS浮动与清除浮动(overflow)例子
		
    在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧． float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神 ...
    
		
    5. 
						
  5. 【CSS】clear清除浮动
		
    clear清除浮动1.作用: 规定元素的某一侧不允许存在浮动元素 2.值: 3.应用: 清除其他浮动元素对其产生的影响 <!DOCTYPE html> <html lang=&quo ...
    
		
    6. 
						
  6. css 浮动和清除浮动
		
    在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...
    
		
    7. 
						
  7. 【转】CSS中的浮动和清除浮动
		
    以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...
    
		
    8. 
						
  8. [Web 前端]   CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
		
    cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...
    
		
    9. 
						
  9. CSS学习摘要-浮动与清除浮动
		
    以下从浮动到BFC的段落 摘自MDN 网络开发者 float 浮动 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Win10下数据增强及标注工具安装
			
    Win10下数据增强及标注工具安装 一．   数据增强利器—Augmentor 1.安装 只需在控制台输入:pip install Augmentor 2.简介 Augmentor是用于图像增强的软件 ...
    
			
    2. 
						
  2. 吴裕雄--天生自然java开发常用类库学习笔记：正则表达式
			
    public class RegexDemo01{ public static void main(String args[]){ String str = "1234567890" ...
    
			
    3. 
						
  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：带有字体图标的导航栏
			
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
    
			
    4. 
						
  4. redis的配置文件介绍
			
    目录 1.开头说明 2.INCLUDES 3.MODULES 4.NETWORK 5.GENERAL 6.SNAPSHOTTING 7.REPLICATION 8.SECURITY 9.CLIENTS ...
    
			
    5. 
						
  5. Oracle IF-ELSE条件判断结构
			
    关于条件判断的几个函数: 一.IF-ELSE 判断语句1.IF 语法 IF 表达式 THEN ... END IF; 输入账号名 kiki 以登陆账号 declare v_name ):='& ...
    
			
    6. 
						
  6. 《方方格子》(WPS版) _v3.6.6.0
			
    <方方格子>(WPS版) 下载地址(b2a7) SHA1:35AE4D99B77613D9E2BAF912477DC74C5C2B8389 版本信息    发行版本 3.6.6.0     ...
    
			
    7. 
						
  7. 066-PHP通过函数名调用函数
			
    <?php function hello(){ //定义函数 echo '<br />Hello!<br />'; } function hellophp(){ //定义 ...
    
			
    8. 
						
  8. Essay写作没逻辑不要慌，掌握这几点即可
			
    今天文章的内容,真的是很多很多留学生的最大的问题,没有之一:逻辑.是的,你没有看错,也不用惊讶.大家的essay写作得分不高,很多时候不是因为语言问题.排除很多细节表达的不足,更让教授头疼的居然是:内 ...
    
			
    9. 
						
  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-volume-down
			
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
    
			
    10. 
						
  10. Centos 7 x86_64 环境Python2.7升级Python3.7.4
			
    升级Python3.7.4 #安装补丁包yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel read ...
    
			
    11.