float

Myth丶恋晨 2022-06-14 05:49 227阅读 0赞

1、浮动：使元素脱离标准普通流，移动到其父元素中相应位置

  1. 选择器{float:属性值;}
  3. left 元素向左浮动
  5. right 元素向右浮动
  7. none 元素不浮动（默认值）

2、范围：不会超出父元素范围（包含padding）

这里写图片描述

3、浮动位置

这里写图片描述

  1. 1、和前一个（块元素）是否浮动有关
  3. 2、如果其中一个子级有浮动的，则其他子级都需要浮动
  5. 3、浮动脱离标准流，不占位置，会影响后面的标准流
  7. 4、元素添加浮动后，元素会具有行内块元素的特性（可以设置宽和高）
  9. 5、父元素会失去高度，影响布局（需要清浮动）

3、浮动带来的影响（清浮动）

  1. 方法一：在父元素最后添加元素
  3.     设置 {clear:属性值;}
  5.     left    不允许左侧有浮动元素（清除左侧浮动的影响）
  7.     right   不允许右侧有浮动元素（清除右侧浮动的影响）
  9.     both    同时清除左右两侧浮动的影响
  12. 方法二：父级设置属性：overflow
  14.     overflow为 hidden|auto|scroll 
  17. 方法三：使用伪元素清除浮动：after
  19.     .clearfix:after {  
  21.         content: "."; 
  23.         display: block; 
  25.         height: 0; 
  27.         clear: both; visibility: hidden;  
  28.     }   
  30.     .clearfix {*zoom: 1;}

发表评论

表情：
评论列表 （有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读

    相关 float

    CSS 之 float我们几乎想不出其他任何使文字环绕图片的效果，除了使用float概念float 将元素放在包含这个元素容器的左边或右边，并允许文本或行内元素包围这个元...

    约定不等于承诺〃约定不等于承诺〃/ 0 赞/ 115 阅读

    相关 css float

    float定义和用法 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一...

    古城微笑少年丶古城微笑少年丶/ 0 赞/ 124 阅读

    相关 float

    元素浮动的特性： 1、浮动的元素脱离了标准文档流，摆脱块级元素和行内元素的限制 2、浮动的元素存在相互贴靠的效果，当宽度不够的时候，会出现自动换行 3、浮动的元素虽然脱离

    蔚落蔚落/ 0 赞/ 238 阅读

    相关 float

    1、浮动：使元素脱离标准普通流，移动到其父元素中相应位置 选择器{float:属性值;} left 元素向左浮动 right 元素

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 228 阅读