关于浮动的介绍

MoCh丨

于 2022-11-28 21:47:36 发布

阅读量305

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_51769213/article/details/128088027

版权

浮动（float）

浮动是一种布局手段，会使元素脱离文档流

元素在文档流的时候，会分块元素，行内元素，行内块元素，各自都有一定的特点

设置元素浮动，可以用float样式

可选值：

none 默认值，不浮动

left 向左浮动

right 向右浮动

2、浮动的特点

设置浮动后的一些特点：（第一类特点）

1、设置元素浮动后，元素会脱离文档流，就不会再占据原来在文档流的位置

浮动元素后面的元素就向上

2、设置元素浮动后，元素会尽可能向左或者向右浮动

浮动元素不会超过它前一个兄弟，最多一边齐

3、如果浮动元素前一个兄弟没有浮动，浮动的元素不会跑上去

4、浮动的元素不会超出父元素

/* 浮动的第二类特点

当浮动的元素碰到了文字，浮动的元素不会盖住文字，

文字会环绕在浮动元素的周围，从而做出了文字环绕图片的效果

这也是浮动最开始的功能

<!-- 浮动元素的第三类特点

设置元素浮动后，元素脱离文档流，元素原来在文档流中分类，特点就不复存在

也就是说行内元素可以设置宽高了，块元素也不会独占一行了，

行内块元素也没有三像素的问题

当元素设置浮动以后，会完全脱离文档流，元素的一些特点也会发生改变

脱离文档流的特点

块元素：

1:块元素不再独占页面的一行

2:块元素的宽高被内容撑开

行内元素：

1:浮动过后的行内元素更像行内块元素,因问一行可以显示多个，并且默认宽度为内容的宽度

总结：当元素设置浮动以后,脱离文档流，就不需要再区分块和行内

3、高度塌陷

一般情况下，我们不会给父元素设置指定的高度

都是让他被内容撑开的

如果我们给子元素设置浮动，子元素会脱离文档流，一旦元素脱离文档流了

子元素就不能再撑开父元素的高度了，导致父元素的高度丢失，而且会导致

我页面布局混乱，这就叫高度塌陷

如何解决：

1、给父元素设置固定高度,但这种方式不推荐使用

解决高度塌陷方法二：

给元素开启隐含属性BFC（块级格式化上下文），一旦元素开启隐含属性BFC后

元素就具有一些独有的特点，这些特点可以解决一些问题，其中就包括高度塌陷

1、开启BFC后，元素具有哪些特点？

（1）、父子外边距就不会重叠了（解决父子外边距重叠的问题）

（2）、开启BFC的元素就不会被浮动元素所覆盖

（3）、开启BFC的元素可以包裹住浮动的元素（解决高度塌陷问题）

2、如何开启BFC属性

（1）、设置overflow样式，样式值只要是非visible

也就是说可以设置hideen，auto，scroll等

其中hideen是副作用最小（推荐使用）

（2）、设置元素浮动(不推荐)

确实可以解决父元素高度丢失的问题，但也会带来一些新问题，父元素也会脱离文档流，

页面布局依然会混乱，而且父元素的宽度也会丢失

（3）、将元素转成行内块元素(不推荐)

可以解决父元素高度丢失的问题，但也带来一些新问题，父元素的宽度丢失了，

而且三像素也出现

（4）、将元素设置绝对定位 position: absolute;(不推荐)

确实可以解决父元素高度丢失的问题，但也会带来一些新问题，父元素也会脱离文档流，

页面布局依然会混乱，而且父元素的宽度也会丢失

解决高度塌陷方案三：

可以直接在高度塌陷的父元素的最后，添加一个空白的div，

由于这个div并没有浮动，所以他是可以撑开父元素的高度的，

然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，

基本没有副作用

使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。

4、清除浮动

通过clear样式，消除浮动元素对下面元素的影响

可选值

left 消除左侧浮动对元素的影响

right 消除右侧浮动对元素的影响

both 消除两侧侧浮动对元素的影响，

其中哪一侧浮动带来的影响大，就清除谁

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>w3导航条</title>
    <style>
      *{
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
      }
      .nav{
        width: 1200px;
        height: 48px;
        background-color: rgb(232,231,227);
        margin: 50px auto;
      }
      ul>li{
        float: left;
        width: 14%;
        line-height: 48px;
        text-align: center;
      }
      ul>li:hover{
        background-color: rgb(62,63,63);
      }
      ul>li:hover>a{
        color: #fff;
      }
      ul>li>a{
        color: rgb(119,119,119);
      }
    </style>
   
  </head>
  <body>
    <ul class="nav">
      <li>
        <a href="#">HTML/CSS</a>
      </li>
      <li>
        <a href="#">Browser Side</a>
      </li>
      <li>
        <a href="#">Server Side</a>
      </li>
      <li>
        <a href="#">programming</a>
      </li>
      <li>
        <a href="#">xml</a>
      </li>
      <li>
        <a href="#">web building</a>
      </li>
      <li class="h">
        <a href="#">reference</a>
      </li>
    </ul>
  </body>
</html>

MoCh丨

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于浮动的介绍

浮动（float）浮动是一种布局手段，会使元素脱离文档流元素在文档流的时候，会分块元素，行内元素，行内块元素，各自都有一定的特点设置元素浮动，可以用float样式可选值：none 默认值，不浮动left 向左浮动right 向右浮动。
复制链接

扫一扫