zoukankan      html  css  js  c++  java
  • CSS清浮动

    前面的话

      人们经常谈起清浮动,其实就是解决浮动元素的包含块高度塌陷的问题

    定义

    clear 清除

      值: left | right | both | none | inherit

      初始值: none

      应用于: 块级元素(块级元素指block元素,不包括inline-block元素)

      继承性: 无

    left:左侧不允许存在浮动元素
    right:右侧不允许存在浮动元素
    both:左右两侧不允许存在浮动元素
    none:允许左右两侧存在浮动元素

      [注意]设置clear属性的元素并不能改变浮动元素,而只能改变自身

      CSS2.1引入了一个清除区域,清除区域是在元素上外边距之上增加的额外间隔,不允许任何浮动元素进入这个范围,这意味着元素设置clear属性时,它的外边距不改变

    方法

      对于标准浏览器来说,清浮动其实就两种方法,一种是在浮动元素下面添加新元素设置clear属性;另一种是触发包含块的BFC,使其包含浮动元素。而对于IE7-浏览器则用到其特有属性haslayout

    【1】clear属性

      [1]<div style="clear:both"></div>

      <注意>并不是很适用,若包含块为<ul>,则子元素只能为<li>,则在<li>后面添加<div>元素不合适

      [2]<br style="clear:both">

      <注意>虽然clear属性只应用于块级元素,但在除IE7-以外的其他浏览器都可以将clear属性应用于<br>元素

      [3]为浮动元素的after伪元素设置clear属性

      .clear:after{content:""; display: block; clear: both;}

      <注意>IE7-浏览器不支持after伪元素

    【2】BFC

      [1]float: left/right

      [2]position:absolute/fixed

      [3]display:inline-block/table-cell/table-caption/flex

      [4]overflow:hidden/scroll/auto

      关于BFC的详细信息移步至此

    【3】IE7-

      关于IE7-浏览器有一个其特有的属性haslayout,当触发包含块的haslayout时,浮动元素被layout元素自动包含

      [1]display:inline-block

      [2]height/除auto外

      [3]float: left/right

      [4]position: absolute

      [5]writing-mode: tb-rl

      [6]zoom: 除normal外

      关于haslayout的详细信息移步至此

    兼容

      在所有浏览器中都兼容的清浮动方案如下:

    .clear:after{content:""; display: block; clear: both;}
    .clear{zoom: 1;}

       除了清除浮动外,常常也需要解决外边距margin重叠的问题。这时,清除浮动和解决margin重叠的代码如下

    .clear:before,.clear:after{content:"";display:table;}
    .clear:after{clear:both;}
    .clear{zoom:1}
  • 相关阅读:
    封装微信小程序
    请求formdata格式
    基于vue的前端框架
    es6 入门
    测试缓存时间问题console.time
    export 与 export default, 以及import引用
    vue emit 实现非父子之间的值传递
    css3 弹性盒子display:flex
    iview $modal 的封装
    render iview tab select的添加和input的添加
  • 原文地址:https://www.cnblogs.com/xiaohuochai/p/5248981.html
Copyright © 2011-2022 走看看