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

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

<!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. JMeter——聚合报告

    AggregateReport 是 JMeter 常用的一个 Listener,中文被翻译为“聚合报告”. ​ 对于每个请求,它统计响应信息并提供请求数,平均值,最大,最小值,错误率,大约吞吐量(以请 ...

  2. matplotlib 散点图

    一.特点 离散的数据,查看分布规律,走向趋势 二.使用 1.核心 plt.scatter(x, y) # x为x轴的数据,可迭代对象,必须是数字 # y为y轴的数据,可迭代对象,必须是数字 # x和y ...

  3. Bug的等级程度(Blocker, Critical, Major, Minor/Trivial)及修复优先级

    Priority()和Severity(严重程度)是Bug的两个重要属性.很多新人经常混淆这两个概念. 通常,人员在提交Bug时,只定义Bug的Severity, 即该Bug的严重程度, 而将Prio ...

  4. linux运行tomcat报错SEVERE: Unable to process Jar entry [avassist xxxx.class]

    tomcat的版本过低换成apache-tomcat-7.0.56以上的高版本的就可以了

  5. TryCatchFinallyReturn

    public class TryCatchFinallyReturnTest { public int test(){ try { int i=1; int j=2/i; return 1; }cat ...

  6. Python 之redis操作

    Redis 是一个高性能的key-value数据库,是一种非关系型的数据库.有以下三个特点: Redis支持数据的持久化,可以将内存中的数据保存在磁盘中,重启的时候可以再次加载进行使用. Redis不 ...

  7. 什么是C/S结构，其和B/S有什么区别很联系呢

    什么是C/S结构,其和B/S有什么区别很联系呢 原地址:https://zhidao.baidu.com/question/12962713.html C/S结构即服务器/客户机结构.C/S结构通常采 ...

  8. 02--java--环境搭建

    第一步,下载JDK 去ORACLE官网http://www.oracle.com下载 有安装版和绿色版,安装版一路下一步,绿色版解压缩压缩包就行了 安装版直接自动配置环境变量,绿色版需要自己配置环境变 ...

  9. chrome 安装

    Centos7 yum安装chrome浏览器   跟着这个教程安装的:Centos7安装chrome浏览器 (点击) 1. 配置yum源 在目录 /etc/yum.repos.d/ 下新建文件 goo ...

  10. shiro 基础使用

    引 言 相关内容 : https://blog.csdn.net/superyayaya/article/details/94408805 在web 中, 不同角色的用户, 具有不同的访问权限, 有的 ...