• float及清除浮动


    1.float元素有继承属性:inherit.

    2.

    span{
       width:100px;
      height:100px;
      background:red;
    }
    文档中不显示,因为span为块状元素,不能设置宽和高。

    3.

    span{
       width:100px;
      height:100px;
      background:red;
      float:left;
    }

    此时在文档中显示。因为设置了浮动属性,会让span元素脱离标准文档流。

    4. 使用浮动,可能出现的问题:①若父元素未设置高度,则父元素会塌陷,没有高度

                                                       ②网页中的临近元素出现异位。

                          问题解决:

    清除浮动 :https://blog.csdn.net/h_qingyi/article/details/81269667

                                            ①给父元素设置高度

                                            ②给父元素也设置浮动属性

                                            ③通过clear清除内部和外部浮动        (在会被影响的临近元素上设置)clear可以继承。

                                            ④给父元素设置overflow属性,并结合zoom:1使用;   

                                                      overflow:hidden;       

                                                       zoom:1;    (IE专用属性)

                                            ⑤  使用after伪元素清除浮动(推荐使用)

                                            ⑥   使用before和after双伪元素清除浮动

    .news {
      background-color: gray;
      border: solid 1px black;
      }
    
    .news img {
      float: left;
      }
    
    .news p {
      float: right;
      }
    
    .content{
      clear:both;
      }
    
    <div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    <div class="content"></div>
    </div>

                                          

    清除浮动的方法可以分成两类:

    一是利用 clear 属性,包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素,其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

    二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文),使到该父元素可以包含浮动元素。

  • 相关阅读:
    oracle查看字符集和修改字符集
    oracle11g 使用数据泵导出导入数据
    Oracle 11G在用EXP 导出时,空表不能导出解决
    帮助小伙伴写的组装xml字符串类
    GCD-01
    UITableViewCell-03
    UITableViewCell-02
    iOS代理-03
    UITableViewCell-01
    iOS代理-02
  • 原文地址:https://www.cnblogs.com/sunmarvell/p/8094543.html
Copyright © 2020-2023  润新知