css元素浮动所需注意的几点是什么

编辑: admin 分类: java 发布时间: 2022-07-07 来源:互联网

注意点：1、浮动元素的左外边界不能超出其包含块的左内边界，右外边界亦然；2、一个浮动元素的顶端不能比其父元素的内顶端更高；3、浮动元素的顶端不能比之前浮动元素或块级元素的顶端更高；4、左浮动元素必须向左尽可能远，右浮动元素须向右尽可能远等。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css中的浮动：

在css中为了让元素移动到父元素的左边或者右边，我们可以对元素设置浮动float.

float:left/right

浮动的选择有两种，一种是float:left左浮动。还有一种是float:right右浮动

如果对一个元素设置了浮动，那么这个元素就会脱离标准文档流，并且该元素后面的元素会占据该元素原本的位置，并且元素后面的内容会被挤出。

加了浮动的元素是没有宽和高的，并且该元素的父元素的高度也会显示即高度塌陷，加了浮动的元素的宽和高是根据元素内部的内容动态需变化的。要对其父元素重新设置高度。

如果对某些元素设置了左浮动，那么这些元素会在同一排显示，但是如果这些元素的宽度和大于父元素，超出的部分(包括该元素)就会在下一行显示。

浮动元素需要遵守的规则（注意点）

  • 浮动元素的左外边界不能超出其包含块的左内边界，右亦然

  • 防止元素彼此覆盖，浮动元素的左(或右)外边界必须是源文档中之前出现的左浮动(右浮动)元素的右(或左)外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。

  • 浮动元素的左外边界必须是源文件中之前出现的左浮动元素的右外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。

  • 左浮动元素的右外边界不会出现在其右边右浮动元素的左外边界的右边。

  • 一个浮动元素的顶端不能比其父元素的内顶端更高

  • 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高

  • 如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。

  • 浮动元素不能超出其包含元素的边界。左(或右)浮动元素的左(或右)边有另一个浮动元素，前者的右外边界不能在其包含块的右(或左)边界的右(或左)边。如果没有足够的空间，浮动元素会被挤到一个新的“行上”

  • 浮动元素必须尽可能高地放置。即满足其他约束条件的前提下，浮动得尽可能高。

  • 左浮动元素必须向左尽可能远，右浮动元素必须向右尽可能远

浮动的排序规则

  • 相同方向的浮动元素,先浮动的显示在前面.因为浮动只会盖住标准流.

  • 不同方向的浮动元素,左浮找左浮,右浮找右浮

  • 浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来决定.

  • 贴靠现象: 如果浮动的最后一个元素超过了父元素的宽度,会自动找上一个元素贴过去,如果宽度还是不够,继续找上一个~如果父元素宽度还是不够的话,那就只能凑合呆着了

  • 图文混排

清除浮动

  • 给前面一个父元素设置高度(在开发中最好不要设置高度,所以此方便不建议使用)

  • 给后边的元素设置clear属性,(注意添加clear属性后margin属性就会失效)

  • 隔墙法

    • 外墙法

      中间加个块级元素并设置clear: both (注意: 可以在第二个盒子使用margin-top,但是第一个盒子不能使用margin-bottom,所以一般既不设置第一个盒子的margin-bottom,也不设置第二个盒子的margin-top,而是直接设置额外块级元素的高度)

    • 内墙法

      块级元素写到第一个盒子最后面并设置clear: both(注意: 第一个盒子可以使用margin-bottom,第二个盒子也可以使用margin-top.额外块级元素也可以设置高度)

    • 区别: 内墙法可以撑起第一个盒子的高度,而外墙法不可以.(改方法同样不建议使用,因为添加了额外的元素)

使用伪元素 (建议使用)

.box1::after{
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.box1{
    *zoom: 1;   // 兼容IE6
}

overflow: hidden(建议使用)

.box1{
    *zoom: 1;   // 兼容IE6
}

（学习视频分享：css视频教程、web前端）

以上就是css元素浮动所需注意的几点是什么的详细内容，更多请关注海外IDC网其它相关文章！

【本文由：阿里云代理商 http://www.56aliyun.com 复制请保留原URL】
更多阅读