css-常用布局方法03-float浮动 + margin布局

最新推荐文章于 2022-09-21 23:26:01 发布

原创最新推荐文章于 2022-09-21 23:26:01 发布 · 604 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

css 专栏收录该内容

31 篇文章

订阅专栏

本文详细介绍了CSS中的浮动布局方法，包括浮动的基本概念、对元素的影响、浮动加外边距的应用及清除浮动的方法，并通过实例展示了如何利用浮动进行网页布局。

文章目录

- - - - 一、css-常用布局方法
      - 1. float
        2. float影响
        3. float浮动 + margin
        4. 如何清除浮动

一、css-常用布局方法

1. float

元素“浮动”
脱离文档流
但不脱离文本流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float</title>
    <style>
        .container {
            background: red;
            width: 400px;
        }
        .p1 {
            background: green;
            float: left;
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="p1">
            float
        </span>
        <div class="p2">
            很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字
        </div>
    </div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BjoOfEod-1614823459856)(../css-imgs/image-20210302153626973.png)]

从图中，我们可以看出，明显的浮动效果，不会影响父元素的布局，但是会影响兄弟元素文字的排版。同样的，我们还可以看到float会对自身元素产生BFC，span本来是inline元素，却可以设置行高，就是因为float形成了块的效应。

2. float影响

对自身的影响
- 形成“块”（BFC）
- 位置尽量靠上
- 位置尽量靠左（右）
对兄弟元素
- 上面贴非float元素
- 旁边贴float元素
- 不影响其它块级元素位置
- 影响其它块级元素内部文本
对父级元素
- 从布局上“消失”
- 高度塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float</title>
    <style>
        .container {
            background: red;
            width: 400px;
            /* margin: 20px; */
        }

        .p1 {
            background: green;
            float: left;
            width: 200px;
            height: 50px;
        }

        .container2 {
            background: gold;
 
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="p1">
            float
        </span>
        <div class="p2">
            很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字
        </div>
    </div>

    <div class="container container2">
        <span>写几个字</span>
        <span class="p1">
            float
        </span>
        <span class="p1">
            float
        </span>
    </div>
    <div class="container" style="height:200px;background:blue;">
        <p>第一行</p>
        <p>第二行</p>
        <p>第三行</p>
    </div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-waYKhWsk-1614823459858)(../css-imgs/image-20210302165121818.png)]

解决方式一：

让父级元素也具备BFC特性，加上overflow:hidden

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XQ30LhRC-1614823459860)(../css-imgs/image-20210302165355765.png)]

解决方式二：

里面有个元素刚好到浮动的高度，从而达到清除浮动的效果

.container2::after{
  content: ' ';
  clear: both;
  display: block;
  visibility: hidden;
  height:0;
}

3. float浮动 + margin

好处：兼容性比较好，支持大部分浏览器。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AfHRYppz-1614823459863)(../css-imgs/image-20210302172114131.png)]

<!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>float+margin布局</title>
    <style>
        .container{
            width: 800px;
            height: 200px;
        }
        .left{
            background: red;
            float: left;
            height: 100%;
            width: 200px;
        }
        .right{
            background: blue;
            float: right;
            width: 200px;
            height: 100%;
        }
        .middle{
            margin-left: 200px;
            margin-right: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            左
        </div>
        <div class="right">
            右
        </div>
        <div class="middle">
            中间
        </div>
    </div>
</body>
</html>

.left的样式也可以使用绝对定位来实现，也能达到相同的效果，但是高度就需要固定。

.left{
  background: red;
  width: 200px;
  position: absolute; 
  height:200px; 
}

4. 如何清除浮动

原因：浮动元素不会占据父元素的空间，父元素布局的时候，不会管浮动元素，有可能浮动元素就会超出父元素，从而对其他元素造成影响，所以作为一个父元素一定要清除浮动，保证对外面是没有影响的。
解决：让盒子负责自己的布局
- overflow:hidden(auto)
- ::after{clear:both}