• CSS float相关介绍


    一、float介绍

    float元素也称为浮动元素,设置了float属性的元素会根据属性值向左或向右浮动。浮动元素会从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素对齐进行环绕。简单来说,就是让block元素无视float元素,让inline元素让流水一样围绕着float元素来实现浮动布局。 文字环绕图片是float典型的应用场景,如下所示:

    html代码

    <img class="float" src="image/HC5450_15-IMS-zh_CN.jpg" />
    <p class="around">华夏之大,有造物之工师,兼创器之良匠,留下传世之美。有些器物,不仅仅需要玻璃罩的保护,更需要心手合一的把玩。摩挲盘桓,实为栖心之境。古而近雅,追求老器物绝不是一味的泥古,而是追求内心的安定,古物经历过时间,消除了火气,更显得雍穆沉静。不入古境,不解其情,若入古境,自得况味,这便是时间的艺术。</p>
    

    css代码

    .float{
      float:left;
      100px;
      height: auto;
      margin: 10px;
    }
    .around{
      300px;
      color:#fff;
      background: #009F95;
      padding: 10px;
    }
    

    由上图可以看出,img元素设置了float:left之后会脱离文档流而居于左侧存在。而p元素无视img元素的存在,从窗口的左上角开始流入,但是p元素中的文字意识到img元素的存在而环绕图片流入。并且img元素是漂浮在p元素的上层。

    二、float元素特性

    1.块级框

    不管一个元素是行内元素还是块级元素,如果被设置了浮动,那浮动元素会生成一个块级框,可以设置它的width和height,因此float常常用于制作横向配列的菜单,可以设置大小并且横向排列。

    (1)先来看一个块级元素的例子:

    html代码

    <div class="div1">
      <img src="image/pic1.png" />
    </div>
    <div class="div2">
      <img src="image/pic2.png" />
    </div>
    

    css代码

    .div1{
      padding: 10px;
      border: 3px solid black;
    }
    .div2 {
      float: left;
      padding:10px;
      border: 3px solid red;
    }
    

    默认情况下,div元素的宽是100%,一旦让该div浮动起来,立刻会像inline元素一样产生包裹性,宽度会跟随内容自适应。

    (2)接着看下行内元素的例子:

    html代码

    <div class="box">
      <span class="menu">首页</span>
      <span class="menu">消息</span>
      <span class="menu">朋友</span>
      <span class="menu">我的</span>
    </div>
    

    css代码

    .box{
       500px;
      background: pink;
      height: 200px;
    }
    .menu{
       100px; 
      float: left; 
      margin: 10px; 
      padding: 10px; 
      background: #eee; 
      text-align: center; 
    }
    

    由上图可见,当span设置float属性后,可以指定width,height值。 同时可以发现,当多个元素指定为float且同时为left/right时,元素是紧挨着排列,行内宽度不够时再换行排列。

    2.高度崩塌

    html代码

    <div class="div1">
      <img src="image/pic1.png" />
    </div>
    <div class="div2">
      <img src="image/pic2.png" />
    </div>
    

    css代码

    .div1{
      padding: 10px;
      border: 3px solid black;
    }
    .div2 {
      border: 3px solid red;
    }
    .div2 img{
      float: left;
      padding:10px;
    }
    

    将float属性设置给div2内部的img元素,可以看出div2的高度并没有img元素被撑起来,因此又叫高度崩塌。

    原因:将img元素设置为浮动元素,所以脱离文档流。因此div2中认为没有元素,所以产生了高度崩塌。具体怎么解决高度崩塌,后面再介绍。

    三、clear属性

    clear属性的作用是清除浮动。

     clear : none | left | right | both;
    
     none  :  默认值。允许两边都可以有浮动对象
    
     left   :  不允许左边有浮动对象
    
     right  :  不允许右边有浮动对象
    
     both  :  不允许有浮动对象
    

    html代码

    <div class="bg1"></div>
    <div class="bg2"></div>
    

    css代码

    .bg1{
      200px;
      height: 200px;
      border: 3px solid black;
      background: url(image/pic2.png);
      float: left;
    }
    .bg2{
      500px;
      height: 300px;
      border: 3px solid red;
      background: url(image/pic1.png);
    }
    

    如上图所示,由于bg1是浮动元素,所以bg2在bg1底层铺展。

    如果想要让bg2换行排列,居于bg1底端下方(如下图),这个时候就要用到clear属性了。

    css代码中,只需要在bg2中加入 clear:left 即可

    .bg1{
      200px;
      height: 200px;
      border: 3px solid black;
      background: url(image/pic2.png);
      float: left;
    }
    .bg2{
      500px;
      height: 300px;
      border: 3px solid red;
      background: url(image/pic1.png);
      clear: left;
    }
    

    对于CSS的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素。

    以上图例子说明。bg1和bg2都设置了float:left。如果在bg1样式中添加样式clear:right,来迫使bg2下移,则没有任何效果。因为这个清除浮动是在bg1中调用的,她只能影响bg1,不能影响到bg2。

    要想要bg2下移,就必须在bg2的样式中使用浮动 clear:left。用来指定bg2元素左边不允许出现浮动元素。

    电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

    四、BFC

    1.BFC的介绍

    定义:

    一些元素,如float元素,如position为absolute,block为inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元素,它们将会建立一个新的块级格式化上下文(Block Formatting Context),也就是我们所说的BFC。

    形成

    BFC也是HTML中的一个盒子(看不见而已),只有满足至少下列条件之一才能形成BFC:

    ① float属性不为none.

    ② position属性不为static和relative.

    ③ display属性为下列之一:table-cell,table-caption,inline-block, flex,inline-flex.

    ④ overflow属性不为visible.

    布局规则

    ① 内部的Box会在垂直方向,一个接一个地放置。

    ② Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

    ③ BFC的区域不会与float box重叠。

    ④ BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。

    ⑤ 计算BFC的高度时,浮动元素也参与计算。

    2、BFC的作用

    (1)容纳浮动元素

    就是解决上面遇到的高度崩塌问题。

    只需要将div2的css代码改动一下,增加一个BFC来容纳浮动元素。

    .div1{
      padding: 10px;
      border: 3px solid black;
    }
    .div2 {
      overflow:hidden;
      border: 3px solid red;
    }
    .div2 img{
      float: left;
      padding:10px;
    }
    

    除此之外,解决高度崩塌问题,还有如下解决方法:

    增加一个清除浮动的子元素

    html代码

    <div class="div1">
      <img src="image/pic1.png" />
    </div>
    <div class="div2">
      <img src="image/pic2.png" />
      <div style="clear:both"></div>
    </div>
    

    (2)阻止文本换行

    大多数情况(若没有特殊设置),如Figure1,文本将会环绕浮动元素,但有时候这并不是我们期望的。我们期待的是Figure2如图:

    想达到图二的效果,只需要将右边文字区域变成一个BFC即可。

    css代码如下:

    .float{
      float:left;
      100px;
      height: auto;
      margin: 10px;
    }
    .around{
      300px;
      color:#fff;
      background: #009F95;
      padding: 10px;
      overflow: hidden;
    }
    

    (3)消除Margin Collapse (外边距坍塌)

    在正常情况下,在一个容器内的所有box将会由上至下依次垂直排列,即我们所说的一个元素占一行,并切垂直相邻的距离(即margin)是由各自的margin决定的,而不是两个margin的叠加。

    让我们看一个例子:

    HTML代码:

    <div class="container">
      <p>list 1</p>
      <p>list 2</p>
      <p>list 3</p>
    </div>
    

    css代码:

    .container {
       300px;
      background-color: black;
      overflow: hidden;
    }
    p {
      background-color: white;
      margin: 20px 0;
      text-align: center;
    }
    

    理想情况下,我们会认为p标签之间的margin应该是它们的和(20px*2=40px),但实际上却是20px.这其实是collapsing margins(外边距坍塌)。其中flex布局不存在collapsing margins,水平方向上也不存在collapsing margins。

    利用BFC能消除collapsing margins。紧记只有当元素在同一个BFC中时,垂直方向上的margin才会clollpase。如果它们属于不同的BFC,则不会有margin collapse。因此我们可以再建立一个BFC去阻止margin collpase的发生。

    所以为了让他们的margins变成40px,我们只需要用div,建立一个BFC,令p元素处于不同BFC即可。

    html代码:

    <div class="container">
      <p>list 1</p>
      <p>list 2</p>
      <div class="newBFC">
    	<p>list 3</p>
      </div>
    </div>
    

    css代码:

    .container {
       300px;
      background-color: black;
      overflow: hidden;
    }
    p {
      background-color: white;
      margin: 20px 0;
      text-align: center;
    }
    .newBFC {
      overflow: hidden;
    }
  • 相关阅读:
    毕业设计进度16
    毕业设计进度15
    毕业设计进度14
    毕业设计进度13
    毕业设计进度12
    毕业设计进度11
    JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
    Media Queries详解
    css 选择器
    css内容样式属性
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/13815211.html
Copyright © 2020-2023  润新知