Float浮动布局

最新推荐文章于 2021-03-21 12:15:44 发布

Awui

最新推荐文章于 2021-03-21 12:15:44 发布

阅读量3.6k

点赞数 4

分类专栏： CSS

本文链接：https://blog.csdn.net/m0_46290225/article/details/108410930

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

什么是浮动布局？

浮动可以设置元素，脱离正常的文档流，向右或者向左，靠近父元素的边缘或者是设置了浮动的其他的元素的边缘靠拢。比如，我们使用div等块标签的时候，它们都是独占一行，但是很多时候要将多个div并排放置，这种情况就可以使用浮动布局。

浮动可以那些问题？

可以解决文字包围图片的问题：
下面是没有使用浮动布局的时候，右边的一大块空白的浪费的，这样就可以使用float：left,使页面呈现杂志样式（文字环绕）

    <style>
        img {
            width: 300px;
            height: 400px;
        }
        div {
            width: 800px;
            height: 800px;
        }
    </style>
</head>
<body>
    <div class="content">
        <img src="img/liuyifei.png" alt="刘亦菲" title="刘亦菲"> 刘亦菲，1987年8月25日出生于湖北省武汉市，影视女演员、歌手，毕业于北京电影学院2002级表演系本科班。 2002年出演《金粉世家》和《天龙八部》步入演艺圈，2004年主演《仙剑奇侠传》人气大增。2006年主演《神雕侠侣》中的“小龙女”一角而受到更广泛关注，同年发行首张个人专辑《刘亦菲》。2008年与成龙、李连杰出演好莱坞电影《功夫之王》。在2009年4月的“80后新生代娱乐大明星”评选活动中，成为内地“四小花旦”之一。2011年主演的电影《新倩女幽魂》和《鸿门宴》以及2012年主演的电影《四大名捕》系列三部曲和《铜雀台》均票房过亿。2014年凭借《铜雀台》获得第五届澳门国际电影节最佳女主角奖。2016年5月20日，其主演的电影《夜孔雀》在全国公映，该片入围第40届蒙特利尔国际电影节主竞赛单元。2017年7月21日，刘亦菲主演的古装玄幻电影《三生三世十里桃花》将于全国上映；11月10日，其参演的电影《烽火芳菲》在中国大陆上映；12月29日，其参演的奇幻喜剧电影《二代妖精》在中国内地上映。2017年11月30日，迪士尼真人版《花木兰》女主敲定刘亦菲。2015年8月，刘亦菲、宋承宪开始交往，2017年年末分手。2018年1月2日，当选2017时光年度大赏华语影坛“十大风云人物”
    </div>
</body>

在这里插入图片描述

使用浮动布局之后：

    <style>
        img {
            width: 300px;
            height: 400px;
            /* 加上浮动 */
            float: left;
        }
        div {
            width: 800px;
            height: 800px;
        }
    </style>
</head>
<body>
    <div class="content">
        <img src="img/liuyifei.png" alt="刘亦菲" title="刘亦菲"> 刘亦菲，1987年8月25日出生于湖北省武汉市，影视女演员、歌手，毕业于北京电影学院2002级表演系本科班。 2002年出演《金粉世家》和《天龙八部》步入演艺圈，2004年主演《仙剑奇侠传》人气大增。2006年主演《神雕侠侣》中的“小龙女”一角而受到更广泛关注，同年发行首张个人专辑《刘亦菲》。2008年与成龙、李连杰出演好莱坞电影《功夫之王》。在2009年4月的“80后新生代娱乐大明星”评选活动中，成为内地“四小花旦”之一。2011年主演的电影《新倩女幽魂》和《鸿门宴》以及2012年主演的电影《四大名捕》系列三部曲和《铜雀台》均票房过亿。2014年凭借《铜雀台》获得第五届澳门国际电影节最佳女主角奖。2016年5月20日，其主演的电影《夜孔雀》在全国公映，该片入围第40届蒙特利尔国际电影节主竞赛单元。2017年7月21日，刘亦菲主演的古装玄幻电影《三生三世十里桃花》将于全国上映；11月10日，其参演的电影《烽火芳菲》在中国大陆上映；12月29日，其参演的奇幻喜剧电影《二代妖精》在中国内地上映。2017年11月30日，迪士尼真人版《花木兰》女主敲定刘亦菲。2015年8月，刘亦菲、宋承宪开始交往，2017年年末分手。2018年1月2日，当选2017时光年度大赏华语影坛“十大风云人物”
    </div>
</body>

在这里插入图片描述

可以解决很多间隔问题：
下面的图片以及代码就存在间隔问题，那如何将间隔去掉？

    <style>
        .parent {
            width: 300px;
            height: 300px;
            background: blue;
            margin: 0 auto;
        }
        .child {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

在这里插入图片描述
这里也是可以使用浮动解决这个间隔问题。但是使用vscode的时候，会有一个警告！

    <style>
        .parent {
            width: 300px;
            height: 300px;
            background: blue;
            margin: 0 auto;
        }
        
        .child {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: pink;
            float: left; 
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

在这里插入图片描述

警告如下：
inline-block和float相互矛盾（一个元素不能同时存在）。警告是float会覆盖inline-block（因为它在后面）。因此，当您第一次设置display时：inline-block; 然后设置float：left; 根据css首先覆盖的原则，后面的样式集将首先覆盖样式集，也就是说，float将覆盖inline-block样式。
如果要清除此警告，请根据需要选择一种样式（内联或浮点样式）保留并删除另一种样式。如果要进行浮动操作，请将显示设置为阻止，如果要进行内联，则将浮动设置为无。
在这里插入图片描述

可以向左或者向右进行排版：
同样，下图就是将盒子往一边靠的效果

    <style>
        .parent {
            width: 500px;
            height: 300px;
            background: blue;
            margin: 0 auto;
        }
        .child {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: pink;
            float: right;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

在这里插入图片描述

最后，我们使用浮动之后会有高度塌陷的情况出现，什么是高度塌陷？

    <style>
        .parent {
            width: 400px;
            background: blue;
            margin: 0 auto;
        }
        .child {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: pink;
            float: left;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="clear"></div>
    </div>
</body>

这里父元素显示高度为0，就可以看出高度塌陷
在这里插入图片描述
解决方法：

设定父元素高度；
添加clear样式；

 .clear {
            clear: both;
        }
 <div class="clear"></div>

最佳解决方案：用子元素撑开父元素（不想给父元素设定一个固定高度）

 <style>
         .parent::after {
            content: "";
            display: block;
            clear: both;
        }
 </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>

Awui

关注

4
点赞
踩
31

收藏

觉得还不错? 一键收藏
1
评论
Float浮动布局

什么是浮动布局？浮动可以设置元素，脱离正常的文档流，向右或者向左，靠近父元素的边缘或者是设置了浮动的其他的元素的边缘靠拢。比如，我们使用div等块标签的时候，它们都是独占一行，但是很多时候要将多个div并排放置，这种情况就可以使用浮动布局。浮动可以那些问题？可以解决文字包围图片的问题：下面是没有使用浮动布局的时候，右边的一大块空白的浪费的，这样就可以使用float：left,使页面呈现杂志样式（文字环绕） <style> img {
复制链接

扫一扫