码迷,mamicode.com
首页 > 其他好文 > 详细

07float浮动

时间:2020-05-18 16:03:05      阅读:53      评论:0      收藏:0      [点我收藏+]

标签:Fix   需要   浮动   oat   宽高   one   其他   兼容   目录   

[目录]

一、普通流介绍

  1. 普通流(标准流):默认状态,元素自动从左往右,从上往下的排列
  2. 块元素
    • 独占一行
    • 可以设置宽高
    • 如果不设置宽高,宽度默认为容器的100%
  3. 行内元素
    • 与其它元素同行显示
    • 不可以设置宽高
    • 宽高就是文字或图片的宽高

二、浮动的基本知识

  1. 浮动

    • 会使元素向左或向右移动,只能左右,不能上下
    • 浮动元素碰到包含框或另一个浮动框,浮动停止
    • 浮动元素之后的元素将围绕它,之前的元素不受影响
    • 浮动元素会脱离标准流
  2. 浮动的基本语法

    • float:left;靠左浮动
    • float:right;靠右浮动
    • float:none;不使用浮动
  3. 清除浮动常用方法

    • 方法一:在浮动元素后使用一个空元素
      例如:<div class="clear"></div>
    • 方法二:给浮动元素的容器添加over-flow:hidden;
      *zoom:1;/*触发hasLayout兼容IE6、7*/
    • 方法三:使用CSS3的:after伪元素
    clearfix:after{
        content:".";
        display:block;
        height:0;
        visibility:hidden;
        clear:both;
    }
    clearfix{
        *zoom:1;/*触发hasLayout兼容IE6、7*/
    }
    
  4. 清除浮动语法
    clear:none/left/right/both
    设置了float的元素会影响其他相邻元素,需要使用clear清除浮动,clear只会影响自身,不会对其他相邻元素造成影响

  5. 清除浮动其它方法

    • 父级元素定义height,只适合高度固定的布局
    • 父级元素也一起浮动,不推荐,会产生新的浮动问题
  6. 总结

    • 浮动会使元素左右移动
    • 浮动元素会脱离普通流
    • 元素浮动后具备inline-block(行内块元素)属性

07float浮动

标签:Fix   需要   浮动   oat   宽高   one   其他   兼容   目录   

原文地址:https://www.cnblogs.com/yujiao-99/p/12910689.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!