浮动会使元素尽量向左或向右移动，直到碰到包含框或另外一个浮动元素的盒子模型的边缘

包含框并不会改变里面浮动元素的宽高，浮动元素宽高不会限制在包含块以内

<!DOCTYPE html>

 <html>

 <head>

    <style type="text/css">

    * {

            margin:0;

            padding:0;

    }

        .container {

            width:110px;

            height:100px;

            border:1px solid blue;

        }

        .block1 {

            width:500px;

            height:50px;

            border:1px solid red;

            float:right;

        }

    </style>

 </head>

 <body>

     <div class="container">

         <div class="block1"><span>块1</span></div>

     </div>

 </body>

 </html>

　　

上例中，block1会保持500px的宽度，但container并不会移动位置让block1显示完全，container位置不会变，block1超出container部分会绘制到浏览器左侧以外看不到

把float改为left，就可以清晰看到block1超出container边框

但是，浮动元素会尽量使自己绘制在包含框内

以下block2会另起一行，而不是接着block1，因为另起一行会使block2超出包含框少一点

<!DOCTYPE html>

 <html>

 <head>

    <style type="text/css">

    * {

            margin:0;

            padding:0;

    }

        .container {

            width:110px;

            height:100px;

            border:1px solid blue;

        }

        .block1 {

            width:50px;

            height:50px;

            border:1px solid red;

            float:left;

        }

        .block2 {

            width:100px;

            height:50px;

            border:1px solid red;

            float:left;

        }

    </style>

 </head>

 <body>

     <div class="container">

         <div class="block1"><span>块1</span></div>

         <div class="block2"><span>块2</span></div>

     </div>

 </body>

 </html>

　　

块级浮动元素的宽高如果不设置，他们的宽高就由内容决定（类似内联元素），这个跟普通块级元素不一样（普通块级元素宽会充满父元素，高由内容决定）

包含块的高度如果不设置，里面全部是浮动元素的话，因为浮动元素时脱离文档流的，就会出现高度为0的情况，即高度塌陷

比如：

<!DOCTYPE html>

 <html>

 <head>

    <style type="text/css">

    * {

            margin:0;

            padding:0;

    }

        .container {

            border:1px solid blue;

        }

        .block1 {

            width:100px;

            height:50px;

            border:1px solid red;

            float:left;

        }

        .block2 {

            width:100px;

            height:50px;

            border:1px solid red;

            float:left;

        }

    </style>

 </head>

 <body>

     <div class="container">

         <div class="block1"><span>块1</span></div>

         <div class="block2"><span>块2</span></div>

     </div>

 </body>

 </html>

　　

可以在后面加一个div，使用clear清除浮动，撑起包含块

<!DOCTYPE html>

 <html>

 <head>

    <style type="text/css">

    * {

            margin:0;

            padding:0;

    }

        .container {

            border:1px solid blue;

        }

        .block1 {

            width:100px;

            height:50px;

            border:1px solid red;

            float:left;

        }

        .block2 {

            width:100px;

            height:50px;

            border:1px solid red;

            float:left;

        }

        .block3{

            clear: both;

        }

    </style>

 </head>

 <body>

     <div class="container">

         <div class="block1"><span>块1</span></div>

         <div class="block2"><span>块2</span></div>

         <div class="block3"><span></span></div>

     </div>

 </body>

 </html>

　　

这种方式比较别扭，一般使用伪元素解决

::after 伪元素在元素最后添加内容（::begin在元素最前面添加内容）

<!DOCTYPE html>

 <html>

 <head>

    <style type="text/css">

    * {

            margin:0;

            padding:0;

    }

        .container {

            border:1px solid blue;

        }

        .block1 {

            width:100px;

            height:50px;

            border:1px solid red;

            float:left;

        }

        .block2 {

            width:100px;

            height:50px;

            border:1px solid red;

            float:left;

        }

        .clearfix::after{

            display: block;

            content: "";

            clear: both;

        }

    </style>

 </head>

 <body>

     <div class="container clearfix">

         <div class="block1"><span>块1</span></div>

         <div class="block2"><span>块2</span></div>

     </div>

 </body>

 </html>

　　

after默认为inline元素，inline元素的clear不起作用，所以要改成block元素
同时还要对after设置内容（content，此处只为清浮动，设置内容为空即可），否则无效

浮动和包含框的关系，伪元素after解决高度塌陷的更多相关文章

  1. after及before伪元素及解决父元素塌陷的几种方法

    一.伪类和伪元素 CSS中伪类和伪元素有很多,也很好用!如果熟练使用的话可以解决很多问题 首先明白什么是伪类:伪类是基于当前元素的状态,而不是元素的id class等静态标志,它是动态变化的,它会在一 ...

  2. 利用伪元素:after清除浮动

    一.代码 html代码 <div class="clearfix"></div> css样式 .clearfix{ zoom:1;/*这个属性是为了兼容IE ...

  3. CSS选择器之伪类选择器（伪元素）

    selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...

  4. Effective前端4：尽可能地使用伪元素

    伪元素是一个好东西,但是很多人都没怎么用,因为他们觉得伪元素太诡异了.其实使用伪元素有很多好处,最大的好处是它可以简化页面的html标签,同时用起来也很方便,善于使用伪元素可以让你的页面更加地简洁优雅 ...

  5. 理解:Before和:After伪元素

    CSS样式表的主要作用是修饰Web页面上的HTML标记,但有时候,为了实现某个效果而往页面里反复添加某个HTML标记很繁琐,或者是显得多余,或者是由于某种原因而做不到.这就是CSS伪元素(Pseudo ...

  6. 如何解决浮动元素高度塌陷---CSS

    解决高度塌陷问题的方法: 方法一. //给父元素添加声明 overflow:hidden; 缺点:回隐藏溢出的元素: 方法二. 在浮动的元素下添加空div标签,并给该元素添加声明: clear:bot ...

  7. css浮动导致的高度塌陷问题及清楚浮动的方法

    浮动很好用,但是用浮动后,当浮动元素的父级元素没有高度时,就会造成高度塌陷,从而影响布局.下面就从一开接触前端时,渐渐发现解决高度塌陷的问题的方式. 一.给浮动元素的父级元素添加固定的高度css[he ...

  8. 浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)

    浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生 ...

  9. float浮动造成高度塌陷的解决办法

    Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素 ...

随机推荐

  1. 自定义博客cnblogs样式的必备前端小知识——js、jq

    JQ.JS相关小知识 任意元素自动点击 $(".editicon").trigger('click') 添加子元素 append() - 在被选元素的结尾插入内容 prepend( ...

  2. 关于互信息（Mutual Information），我有些话要说

    两个随机变量的独立性表示两个变量X与Y是否有关系(贝叶斯可证),但是关系的强弱(mutual dependence)是无法表示的,为此我们引入了互信息. 其中 p(x,y) 是 X 和 Y 的联合概率 ...

  3. C# 调用word进程操作文档关闭进程

    C# 调用word进程操作文档关闭进程 作者:Jesai 时间:2018-02-12 20:36:23 前言: office办公软件作为现在主流的一款办公软件,在我们的日常生活和日常工作里面几乎每天都 ...

  4. Django2 外键遇到的坑

    # 出版社 class Publisher(models.Model): # 自增.主键 id id = models.AutoField(primary_key=True) # varchar(32 ...

  5. CentOS7 搭建Fabric 1.0

    1.环境搭建 1.1 go的按装及配置 1.1.1下载go压缩包 ​ wget https://dl.google.com/go/go1.9.2.linux-amd64.tar.gz 1.1.2 解压 ...

  6. IO系统-基本知识

    注:本文档主要整理了Linux下IO系统的基本知识,是整理的网易云课堂的学习笔记,老师讲得很不错,链接如下:Linux IO系统 1.Linux操作系统的基本构成 内核:操作系统的核心,负责管理系统的 ...

  7. Stream排序Map集合

    最近小编自己一个人在负责一个项目的后台开发,其中有一部分是统计相关的功能,所以需要一些排序或者分组的操作,之前这种操作小编觉得还是比较麻烦的,虽热有一些现成的工具类,但是工具类的写法也是比较复杂的,但 ...

  8. 批量解决win10图标上有两个蓝色箭头的方法

    双击“此电脑”,点击“C盘”,可以看到一个”用户“文件夹,双击”用户“, 选择现在正在使用的用户名,双击用户名,找到该文件夹下的”桌面“或”Desktop“点击“属性”, 在“常规”选项卡中的属于项中 ...

  9. sense8影评摘抄

    “卡尔维诺在<为什么读经典>中<西诺拉在月球>一章里如是记述: 月球上的贵族光着身子四处走,仿佛这样还够,他们还在腰间悬挂阳具造型的铜饰.“我觉得这个习俗真是奇特.在我们的世界 ...

  10. linux ftp 服务器 ，web 服务器 配置

    ftp服务器配置: 1:vsftpd.conf 2;vsftpd.ftpusers 3:vsftpd.user_list web服务器配置: apache 配置