zoukankan      html  css  js  c++  java
  • float 常见用法与问题--摘抄

    float 属性绝对是众多切图仔用的最多的 CSS 属性之一,它的用法很简单,常用值就 leftrightnone 三个,但是它的特性你真的弄懂了吗?

    我会在这里介绍我对 float 的认识与使用,以及使用过程中遇到的问题。

    对 float 的认识

    1. float 元素具有 BFC 模型特性

    当给元素添加 float 属性后,元素便会具有 BFC 模型的效果。比如给内联元素 span 等添加 float 属性后,内联元素也可以设置宽高和 margin。

    2. float 与 position

    当给元素添加了绝对定位 absolute 或者 fixed 后,元素的浮动效果就会消失,即便 float 属性设置在 position 属性之后。

    3. 脱离标准文档流

    浮动元素会脱离标准文档流,会给它后面的兄弟元素造成影响,如果要清楚对兄弟元素的影响,只需要给紧邻的兄弟元素添加 clear: both 就好,但是紧邻的兄弟元素的 margin 依然是相对于父元素的。

    4. 破坏父元素高度

    当父元素没有设置高度,也不是 BFC 模型时,如果给子元素添加浮动效果,那么便会造成父元素高度的坍塌。

    要清除浮动给父元素带来的破坏效果,方案也有很多,最直接的是把父元素变成 BFC 模型的元素就行。

    不过大家使用最多的方式应该是添加一个 .clearfix 的类,不过对于这个类的写法有很多种,而我一般使用的是张鑫旭老师的方法,代码量最少:

    .clearfix {
        zoom: 1;
    }
    .clearfix::after {
        content: '';
        display: table;
        clear: both;
    }

    5. float 与 padding

    浮动元素不会超过父元素的内边距 padding。

    利用第五点与第三点,我们在方便的实现一些布局效果并减少层级嵌套。

    比如我们通常会遇到如下的样式布局:

    image

    代码实现:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <title>浮动</title>
    </head>
    <body>
      <div class="container">
        <p class="tt">1. 这是标题</p>
        <button class="btn">删除</button>
        <div class="con">
          这里是具体的内容
        </div>
      </div>
    </body>
    </html>
    .container {
      width: 400px;
      padding: 20px;
      border: 1px solid #ccc;
    }
    .tt {
      float: left;
      margin: 0;
      width: 200px;
      overflow: hidden;
    }
    .btn {
      float: right;
    }
    .con {
      padding-top: 10px;
      clear: both;
    }

    标题栏既有文本也有删除等按钮,我们直接使用 float,而下面的内容部分我们通过 clear: both; 来让显示位置正确。标题栏部分和内容部分的间距则通过给 .con 元素添加 padding 而不是 margin 来控制,因为它的 margin 是相对于父容器的。

    6. float 与 margin

    两个相邻的浮动元素,当第一个浮动元素的宽度为100%时,第二个浮动元素会被挤到下面,通过添加负的 margin-left 或者 margin-right 值(绝对值最少等于它自身的宽度),可以使它回到第一行。

    常见布局

    利用这一点,我们也可以实现很多布局,比如:

    在书写html代码时,我们通常的习惯根据UI样式,从左往右来写代码,但有时候右侧的内容比较重要,所以它的html结构需要放在左侧内容上面,让它更早的加载。

    图一

      <div class="comment">
        <!-- 右侧重要内容 -->
        <div class="content">
          <div class="author">
            <span class="name">哇哈哈</span>
            <span class="date">2016-78-55</span>
          </div>
          <p class="text">吃的再多也不长胖,好愁人啊,怎么能快速长胖呢,在线等,急!吃的再多也不长胖,好愁人啊,怎么能快速长胖呢,在线等,急!吃的再多也不长胖,好愁人啊,怎么能快速长胖呢,在线等,急!吃的再多也不长胖,好愁人啊,怎么能快速长胖呢,在线等,急!吃的再多也不长胖,好愁人啊,怎么能快速长胖呢,在线等,急!吃的再多也不长胖,好愁人啊,怎么能快速长胖呢,在线等,急!吃的再多也不长胖,好愁人啊,怎么能快速长胖呢,在线等,急!</p>
          <div class="meta">
            <span class="msg-tag"></span>
            <span class="msg-tag">回复</span>
          </div>
        </div>
        <!-- 左侧内容 -->
        <a href="#" class="avatar"><img src="images/header.jpg" alt="头像"></a>
      </div>
    * {margin:0; padding:0;}
    li {list-style: none;}
    a {text-decoration: none;}
    body {font-family: '微软雅黑';}
    
    .wrap {
      width: 800px;
      margin: 50px auto;
    }
    .content {
      float: right;
      margin-left: 100px;
    }
    .date {
      font-size: 14px;
      color: #666;
    }
    .text {
      margin: 20px 0;
    }
    .avatar {
      float: left;
      margin-right: -80px;
    }
    .avatar img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }

    如上面图的效果,尽管在UI上,.content 元素在 .avatar 右边,但我们在 html 结构中,仍然需要把 .content 元素放到 .avatar 元素前面,这个时候就可以通过给 .content 元素设置为右浮动,然后给 .avatar 元素设置左浮动,再添加负 margin-right 值,让它回到上面。

    2. 右侧定宽流式布局

    image

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <title>test</title>
    </head>
    <body>
      <div class="content">
        <div class="box1">
          <div class="inner"></div>
        </div>
        <div class="box2"></div>
      </div>
    </body>
    </html>
    .content {
      width: 500px;
      overflow: hidden;
    }
    .box1 {
      box-sizing: border-box;
      float: left;
      width: 100%;
      height: 50px;
      padding-right: 220px;
      border: 1px solid #ccc;
    }
    .inner {
      width: 100%;
      height: 40px;
      border: 1px solid #f23;
    }
    .box2 {
      float: right;
      width: 200px;
      height: 30px;
      margin-left: -100%;
      border: 1px solid #2fe;
    }
  • 相关阅读:
    网页加速的14条优化法则 网站开发与优化
    .NET在后置代码中输入JS提示语句(背景不会变白)
    C语言变量声明内存分配
    SQL Server Hosting Toolkit
    An established connection was aborted by the software in your host machine
    C语言程序设计 2009春季考试时间和地点
    C语言程序设计 函数递归调用示例
    让.Net 程序脱离.net framework框架运行
    C语言程序设计 答疑安排(2009春季 110周) 有变动
    软件测试技术,软件项目管理 实验时间安排 2009春季
  • 原文地址:https://www.cnblogs.com/liuhao-web/p/8458051.html
Copyright © 2011-2022 走看看