float的设计初衷仅仅是：为了文字环绕效果

float的包裹与破坏

包裹：收缩、坚挺、隔绝（BFC）

破坏：父元素高度塌陷

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>Layout</title>

    <style>

      .box{

          border: 1px solid red;

          width: 300px;

          margin: 20px auto;

      }

      .left{

          float: left;

          height: 100px;

          width: 50px;

          border: 1px solid black;

      }

      .right{

          float: right;

          height: 100px;

          width: 50px;

          border: 1px solid green;

      }

    </style>

  </head>

  <body>

    <div class="box">

        <div class="left"></div>

        <div class="right"></div>

    </div>

  </body>

</html>

如何降低float破坏性的影响（清除浮动）？

1、底部插入clear:both;

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>Layout</title>

    <style>

      .box {

        border: 1px solid red;

        width: 300px;

        margin: 20px auto;

      }

      .clearfix {

        clear: both;

      }

      .left {

        float: left;

        height: 100px;

        width: 50px;

        border: 1px solid black;

      }

      .right {

        float: right;

        height: 100px;

        width: 50px;

        border: 1px solid green;

      }

    </style>

  </head>

  <body>

    <div class="box">

      <div class="left"></div>

      <div class="right"></div>

      <div class="clearfix"></div>

    </div>

  </body>

</html>
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>Layout</title>

    <style>

      .box {

        border: 1px solid red;

        width: 300px;

        margin: 20px auto;

      }

      .box:after {

        content: '';

        display: block;

        height: 0;

        overflow: hidden;

        clear: both;

      }

      .left {

        float: left;

        height: 100px;

        width: 50px;

        border: 1px solid black;

      }

      .right {

        float: right;

        height: 100px;

        width: 50px;

        border: 1px solid green;

      }

    </style>

  </head>

  <body>

    <div class="box">

      <div class="left"></div>

      <div class="right"></div>

    </div>

  </body>

</html>
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>Layout</title>

    <style>

      .box {

        border: 1px solid red;

        width: 300px;

        margin: 20px auto;

      }

      .box:after {

        content: '';

        display: table;

        clear: both;

      }

      .left {

        float: left;

        height: 100px;

        width: 50px;

        border: 1px solid black;

      }

      .right {

        float: right;

        height: 100px;

        width: 50px;

        border: 1px solid green;

      }

    </style>

  </head>

  <body>

    <div class="box">

      <div class="left"></div>

      <div class="right"></div>

    </div>

  </body>

</html>

2、父元素BFC/haslayout

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>Layout</title>

    <style>

      .box {

        border: 1px solid red;

        width: 300px;

        margin: 20px auto;

        overflow: hidden;

      }

      .left {

        float: left;

        height: 100px;

        width: 50px;

        border: 1px solid black;

      }

      .right {

        float: right;

        height: 100px;

        width: 50px;

        border: 1px solid green;

      }

    </style>

  </head>

  <body>

    <div class="box">

      <div class="left"></div>

      <div class="right"></div>

    </div>

  </body>

</html>

float的特性

1、元素block块状化（砖头化）；

2、破坏性造成的紧密排列特性（去空格化）。

CSS深入理解之float（HTML/CSS）的更多相关文章

  1. CSS深入理解学习笔记之absolute

    1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...

  2. CSS深入理解之absolute（HTML/CSS）

    absolute和float是同父异母的兄弟,因为它们具有相同点:包裹性与破坏性 absolute的特点 1.独立的,并且可以摆脱overflow的限制,无论是滚动还是隐藏: 2.无依赖,不受rela ...

  3. CSS display:inline和float:left两者区别探讨

     本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...

  4. CSS 中，用 float 和 position 的区别是什么？

    CSS 中,用 float 和 position 的区别是什么? 呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和posi ...

  5. CSS深入理解之overflow

    CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...

  6. jsp学习---css基础知识学习,float,position,padding,div,margin

    1.常用页面布局 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  7. CSS深入理解之line-height

    以下文字整理自慕课网——张鑫旭的<CSS深入理解之line-height>. line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 定义三问: 什 ...

  8. 关于DIV+CSS和XHTML+CSS的理解

    WEB标准是一系列标准的集合,并不是仅“DIV+CSS”布局就可以实现.以CSS网页布局只是标准的基础之一.“DIV+CSS”布局只是一种通俗的称呼罢了.而我们学习的目标在于以XHTML建立良好的语义 ...

  9. CSS初步理解

    近期在学习牛腩的时候遇到了网页的制作.挺新奇的.其中涉及到了有关CSS的知识,于是乎自己也就花费两个小时的时间.找了本浅显易懂的书来看了一遍,从宏观上来了解CSS的相关内容.有关CSS的基础知识详见下 ...

随机推荐

  1. 前后端分离最佳实现，使用Nuxt.js快速搭建单页SSR应用

    通常我们搭建ssr应用需要自己选择多个组件集成到一起 webpack babel loaders router server-render 各种入口配置等 如果是基于vue+vuex+vue-rout ...

  2. Linq基础知识小记四之操作EF

    1.EF简介 EF之于Linq,EF是一种包含Linq功能对象关系映射技术.EF对数据库架构和我们查询的类型进行更好的解耦,使用EF,我们查询的对象不再是C#类,而是更高层的抽象:Entity Dat ...

  3. JVM-垃圾收集算法、垃圾收集器、内存分配和收集策略

    对象已死么? 判断一个对象是否存活一般有两种方式: 1.引用计数算法:每个对象都有一个引用计数属性,新增一个引用时计数加1,引用释放时计数减1.计数为0时可以回收. 2.可达性分析算法(Reachab ...

  4. .Net WEB 程序员需要掌握的技能

    原文链接:http://deshui.wang/%E6%8A%80%E6%9C%AF/2015/05/12/net-study-road 基础部分 C# 基础语法 OOP的概念,面向对象的理解 继承 ...

  5. ASP.NET：EntityFramework实现Session

    ASP.NET默认的InProc模式的Session既浪费内存又在网站重启时存在数据丢失问题,SQLServer模式的Session只支持SQL Server又需要命令行配置.使用EntityFram ...

  6. iptables关键学习总结

    iptables技术推荐参考这位仁兄的博客:http://www.zsythink.net/archives/category/%E8%BF%90%E7%BB%B4%E7%9B%B8%E5%85%B3 ...

  7. notepad++上搭建gtk+2.0/3.x开发环境

    前言 老师布置了一道题需要用到图形界面,于是开始找图形库.最后选择了gtk+图形库,然后折腾了大概一天. 这里记录自己新学到的知识,同时也给后来者一些便利. 准备 下载以下内容 notepad++(由 ...

  8. Redis debugging guide---官方

    Redis debugging guide Redis is developed with a great stress on stability: we do our best with every ...

  9. Nokogiri爬虫教程

    Parsing HTML with Nokogiri http://ruby.bastardsbook.com/chapters/html-parsing/ Inspecting a Webpage' ...

  10. ARM的体系结构与编程系列博客——ARM处理器系列介绍

    ARM处理器系列介绍 现在到了3月,过年过得过于舒服了.系列博客也停更了近半月,我果然是个慢(lan)性(gui)子,那么趁着到校的第一天晚上,就写一篇博客来继续我的系列博客了!众所周知,ARM处理器 ...