CSS布局之float浮动

最新推荐文章于 2022-06-01 20:38:12 发布

叛逆的鲁鲁修love CC

最新推荐文章于 2022-06-01 20:38:12 发布

阅读量124

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/alvin2147483647/p/4951355.html

本文深入讲解CSS中的浮动布局原理及应用技巧，包括浮动元素如何脱离文档流、如何控制浮动元素的位置，以及如何解决由浮动引发的布局问题。

之前对CSS的浮动布局总是一知半解，最近开发中用的多了，对它的用法进行一些总结，以便以后忘记时可以查到。哈哈，别说我记性不好，我可是说真的，毕竟前端的知识实在是多而杂，多做笔记，遇到问题时网上搜索资料是其一，但我觉得更重要的是把你遇到的问题和解决方法记录下来。。这样以后你的开发效率是多高。言归正传，对浮动进行一些记录。

1.首先，网页是一个文档流，默认按块元素和级联元素从左到右，从上至下的依次显示。而Float浮动元素，就好比是漂浮在了文档流之上，不占据文档流的位置。

如下就是不进行任何浮动的文档页面：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style rel="stylesheet">
        .content{
            width: 500px;
            border: 1px solid red;
            background: cornflowerblue;
            height: 400px;
        }
        .boat{
            width: 100px;height: 100px;
            background: red;
            border: 1px solid #f7ffec;
        }
        .nofloat{
            height: 50px;
            background: yellow;
            border: 1px solid #195dff;
        }
    </style>
</head>
<body>

    <div class="content">
        <div class="nofloat"> 我占据父级的一整行</div>
        <div class="boat">我是漂浮的小船 现在没浮动</div>
        <div class="boat">我是漂浮的小船 现在没浮动</div>
        <div class="boat">我是漂浮的小船 现在没浮动</div>
    </div>
</body>
</html>

2.接下来我们把小船进行浮动，左浮动右浮动都行。效果如下：

        .boat{
            width: 100px;height: 100px;
            background: red;
            border: 1px solid #f7ffec;
          float: left;
        }

可以清楚的看到，当浮动元素的兄弟元素（同级元素）独占一行或者预留的空间不足时，浮动元素会换行浮动。浮动是相对的，是相对其直接父级元素浮动，如在此处，.boat是相对于.content浮动的，可以用此来进行响应式布局，相对于父元素宽高的百分比。另外，如果不想让浮动元素不浮动在一行或者相邻，可以让后来的浮动元素不浮动去靠着之前浮动好了的元素，什么意思呢？就是如果小船3说小船1和2太烦了，不想浮动在他门后面，这时他可以告诉上帝（浏览器说）我的左边不能有浮动，代码为：

        .boat:last-child{
            clear: left;
        }

注意：因为这些类名都相同，所以用.boat:last-child选择最后一个DOM元素，当然也可以为三个小船设置不同的class类名。

效果如下：

同理：一个浮动元素如果不想让其右边右浮动元素，也可以在右边的浮动元素上加上clear:left或者right。注意，不是在本身加，而是在原本挨着但是现在想踢开的那个元素上加。还有也可以不让左右两边有浮动的元素，利用clear:both；

个人理解的总结，如有错误之处，欢迎指正

转载于:https://www.cnblogs.com/alvin2147483647/p/4951355.html