浮动

浮动

1.元素浮动产生的特点


1. 浮动元素会脱离文档流，后面的的元素会占据原来的位置（显示在底下，文字会被挤出）
2. 不论元素原来的显示模式是什么，设置成浮动，具有自己的显示模式，具有如下特点
   ① 默认宽高被内容撑开，不存在外边距塌陷和合并，左右外边距设置auto不会居中
   ② 不会被父元素作为文本去处理
   ③ 可以设置宽高、内外边距
3. 多个兄弟元素一起浮动，会横向排列，一行放不下，自动换行

2.浮动元素产生的影响及解决办法

​ 影响:

元素浮动之后无法撑起父元素的高度，使父元素高度塌陷

解决：


- 方案一 父元素设置高度
- 方案二 父元素也设置浮动
- 方案三 给父元素设置 overflow:hidden（推荐）
- 方案四 在浮动元素的后面添加一个兄弟元素，该元素要求是块级元素，设置 clear:both
- 方案五 原理与方案四一致，使用伪元素选择器动态地在浮动元素的后面添加一个兄弟元素，设置 clear:both(推荐)



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

浮动

功能：文字环绕

图片是一个inline，它在外部表现为行内元素（一行水平排列），在内部表现为块状元素可以设置宽度和高度。

原理：

  1. 浮动元素的父元素高度塌陷。这样让跟随的内容可以和浮动元素在一个水平线上。

  2. 块状盒子和浮动元素会重叠，但是块状元素中的行框不会重叠。

浮动的时候的一些规则

  1. 浮动元素向左浮动后面的元素在它的右边。如果一行放不下就换行。

  2. 元素浮动的时候不会超出父元素的左边、右边、上边，但是下边允许超出。

  3. 元素浮动之后会变成块状元素（不绝对，比如list-item类型就不会）。

  4. 浮动元素的上下外边距不折叠。

  5. 子元素浮动，父元素也浮动，父元素高度将不会塌陷。

    清除浮动

    clear:value

    clear的意思是元素盒子的边不能和前面的浮动元素相邻。

    哪边有浮动就抗哪边。

    <!DOCTYPE html>
<html>

<head>
    <style>
        .z{
            float:left;
            width:100px;
            height:100px;
            border:1px solid green;
        }
    </style>
</head>

<body>
    <div class="z">1</div>
    <div class="z" style="clear:left;">2</div>
    <div class="z">3</div>
</body>

</html>

    撑高父元素的方法

    1. 直接给父元素设置高度。（不太好，因为有可能出现高度不够的情况，这个时候还是会出现块状元素重叠，行框盒子不重叠的情况）

    2. clear方式撑高父元素。

      在普通块状元素上面使用clear的时候普通块状元素会移动到相关浮动元素的下方。

      普通块状元素需要被父元素包裹。

      普通块状元素使用float之后移动到了相关浮动元素下方。

      float的元素不能超出父元素的顶边、左边和右边。

      <!DOCTYPE html>
<html>

<head>
    <style>
        #f{
            border:1px solid yellow;
        }
        .z{
            float:left;
            width:100px;
            height:100px;
            border:1px solid green;
        }
    </style>
</head>

<body>
    <div id="f">
        <div class="z">1</div>
        <div class="z">2</div>
        <div class="z">3</div>
        <div style="clear:both;"></div>
    </div>
    <div>123456</div>

</body>

</html>
posted @ 2023-03-13 21:02  chichi0002  阅读(49)  评论(0)  编辑  收藏  举报