第十五章 浮动

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>浮动</title>
    <style media="screen">
      /*div,p,h1,span,strong{
        border: 1px solid;
      }*/

      /*.box1 {
        height: 100px;
        width: 100px;
        background-color: red;
        float: left;
      }
      .box2{
        height: 100px;
        width: 100px;
        background-color: blue;
        float: right;
      }*/

      /*.box1{
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
      }
      .box2{
        width: 200px;
        height: 200px;
        background-color: blue;
      }*/

      /*.box1{
        width: 50px;
        height: 50px;
        background-color: red;
        float: left;
      }
      .box2{
        width: 100px;
        height: 100px;
        background-color: blue;
      }
      .box3{
        width: 150px;
        height: 150px;
        background-color: green;
        float: right;
      }
      .box4{
        width: 200px;
        height: 200px;
        background-color: brown;
        float: right;
      }*/

      /*.father{
        width: 100px;
        height: 200px;
        background-color: brown;
      }
      .box1{
        width: 50px;
        height: 100px;
        background-color: green;
        float: left;
      }
      .box2{
        width: 50px;
        height: 50px;
        background-color: red;
        float: left;
      }
      .box3{
        width: 100px;
        height: 50px;
        background-color: blue;
        float: left;
      }*/

      /*img{
        float: left;
      }*/
      html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
      .header{
        width: 980px;
        height: 100px;
        margin: 0 auto;
      }
      .header .brownDiv{
        width: 250px;
        height: 100px;
        float: left;
        background-color: brown;
      }
      .header .greenDiv{
        width: 150px;
        height: 50px;
        background-color: green;
        float: right;
      }
      .header .blueDiv {
        width: 650px;
        height: 50px;
        background-color: blue;
        float: right;
      }
      .content{
        width: 980px;
        height: 400px;
        margin: 0 auto;
        margin-top: 10px;
      }
      .content .leftDiv{
        width: 320px;
        height: 400px;
        background-color: yellow;
        float: left;
      }
      .content .rightDiv{
        width: 650px;
        height: 400px;
        float: right;
      }
      .content .rightDiv .rightTop{
        width: 650px;
        height: 350px;
      }
      .content .rightDiv .rightTop .rightTopLeft{
        width: 400px;
        height: 350px;
        float: left;
      }
      .content .rightDiv .rightTop .rightTopLeft .rightTopLeftTop {
        width: 400px;
        height: 200px;
        background-color: red;
      }
      .content .rightDiv .rightTop .rightTopLeft .rightTopLeftBottom {
        width: 400px;
        height: 140px;
        background-color: blue;
        margin-top: 10px;
      }
      .content .rightDiv .rightTop .rightTopRight {
        width: 240px;
        height: 350px;
        background-color: green;
        float: right;
      }

      .content .rightDiv .rightBottom{
        width: 650px;
        height: 40px;
        background-color: blue;
        margin-top: 10px;
      }
      .footer{
        width: 980px;
        height: 40px;
        background-color:blue;
        margin: 0 auto;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <!-- <div class="">
      我是模块
    </div>
    <p>我是段落</p>
    <h1>我是标题</h1>
    <span>我是域</span>
    <strong>我是强调</strong> -->

    <!-- <span class="box1"></span>
    <span class="box2"></span> -->

    <!-- <div class="box1">
      box1
    </div>
    <div class="box2">
      box2
    </div>
    <div class="box3">
      box3
    </div>
    <div class="box4">
      box4
    </div> -->

    <!-- <div class="father">
      <div class="box1">

      </div>
      <div class="box2">

      </div>
      <div class="box3">

      </div>
    </div> -->

  <!-- ![](../HTML5/0.gif)
  <p>宋佳，1980年11月13日出生于黑龙江省哈尔滨市南岗区，毕业于上海戏剧学院表演系，中国女演员，因有同名的前辈女演员宋佳，故多被媒体称为“小宋佳”。2006年出演电影《好奇害死猫》开始崭露头角，并因此获第26届中国电影金鸡奖最佳女配角提名；2012年，出演都市励志剧《那样芬芳》，饰演荣芬芳。同年，宋佳凭借《悬崖》获得第18届上海电视节最佳电视剧女演员奖和第9届中国金鹰电视艺术节“最佳艺术表演女演员奖”；2013年凭借主演电影《萧红》获29届中国电影金鸡奖“最佳女主角”、第9届中美电影节</p> -->

  <div class="header">
    <div class="brownDiv">

    </div>
    <div class="greenDiv">

    </div>
    <div class="blueDiv">

    </div>
  </div>

  <div class="content">
    <div class="leftDiv">

    </div>
    <div class="rightDiv">
      <div class="rightTop">
        <div class="rightTopLeft">
          <div class="rightTopLeftTop">

          </div>
          <div class="rightTopLeftBottom">

          </div>
        </div>
        <div class="rightTopRight">

        </div>

      </div>
      <div class="rightBottom">

      </div>
    </div>
  </div>
  <div class="footer">

  </div>
  </body>
</html>

第119课 网页布局方式

网页的布局方式其实就是浏览器是如何对网页中的元素进行排版的

1、标准流（文档流／普通流）排版方式

1、1其实浏览器默认的排版方式就是标准的排版方式
1.2在CSS中将元素分为三类，分别是块级元素／行内元素／行内块级元素
1.3在标准流中有两种排版方式，一种是垂直排版，一种是水平排版
垂直排版，如果元素是块级元素，那么就会垂直排版
水平排版，如果元素是行内元素／行内块级元素，那么就会水平排版

2、浮动流排版方式

3、定位流排版方式

第120课 浮动流基本概念

浮动流排版方式

1、浮动流是一种“半脱离标准流”的排版方式
2、浮动流只能水平排版，只可以设置某个元素左对齐或者右对齐。

注意点
1、浮动流没有center居中对齐
2、在浮动流中是不可以使用margin：0 auto;的

特点：

1、在浮动流中不区分块级元素／行内元素／行内块级元素，都可以水平排版
2、在浮动流中不区分块级元素／行内元素／行内块级元素，都可以设置宽高
3、综上所述：浮动流中的元素和标准流中的行内块级元素很像

第121课 浮动元素脱标

元素的脱标：就是元素脱离了标准流

当某一个元素浮动之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标

影响：如果前面一个元素浮动了，而后面一个元素没有浮动，
那么这个时候前面的一个元素就会盖住后面的一个元素

第122课 浮动元素排序规则

1、相同方向上的浮动元素，先浮动的元素显示在前面，后浮动的元素会显示在后面
2、不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动
3、浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置来确定

第123课 浮动元素贴靠现象

如果父元素的宽度小于元素的宽度，那么元素就会找他前面一个元素之前的元素，查看宽度是否合适
若果合适，贴着他前面一个元素之前的元素
如果不够，继续寻找，直到找到父元素为止

第124课 浮动元素字围现象

文字会围绕浮动元素显示

第125、126、127 课 浮动练习

垂直方向：标准流
水平方向：浮动流

1、copy 去除margin padding
2、从上到下，从外到内
3、先垂直标准流，水平浮动流
在企业开发中，垂直方向使用标准流，水平方向使用浮动流

复杂界面

1、从上至下布局
2、从外向内布局
3、水平方向可以先划分为一左一右，再对左边／右边进行进一步布局

内容参考

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,805评论 1赞 92
  • 浮动
    网页的布局方式 1.什么是网页的布局方式?网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 1.标准流...
    sweetMood阅读 270评论 0赞 0
  • 雨夜月风跟着李南江学习HTML5—CSS学习
    CSS学习感言： CSS明显比HTML复杂一些，用的时间也多，而且也还有许多迷惑的地方，特别是关于定位和浮动，理解...
    雨夜月风阅读 454评论 0赞 1
  • 说说图书馆最近的台版书展(草稿)
    展，当然是为了卖嘛。不过车展旁边的美女或许还是不能带走。新图书馆建成，当然需要新书充实馆藏。这不厦门外图书店就来了...
    少卿足下阅读 525评论 0赞 2
  • 【日记52】拥抱当下
    【日记52】 七月的广东，天气变化比翻书还快，说好的晴天，说下就下。冒着小雨，驱车两个小时，终于来到培训地点，雨中...
    赵静理财阅读 566评论 0赞 50