干货教学-CSS之浮动布局

浮动

在 CSS 中,浮动(float)属性的出现主要是为了实现浮动元素周围文字环绕的效果。例如,在印刷设计中,文本可以围绕图片进行排版,这被称为"文本环绕"。在网页设计中,应用了 float 属性的页面元素就像印刷布局里面被文字包围的图片一样,浮动的元素仍然是网页流的一部分,就像这样。

css 复制代码
img{
	width:50px;
	float:left;
}

他让一个Box脱离了文档流,但是又不像绝对定位那种,虽然脱离了文档流,但是并不会覆盖文字,文字会围绕着图片排版。浮动能让块级元素水平排列。

小tips:浮动元素可以用margin属性设置左右外边距,但是不能使用margin:0 auto来让元素水平居中。

浮动带来的问题

我们准备用ul装三个小li的盒子,然后ul下面放一个Box(title),当我们给li添加浮动,三个小li会去到同一行,按道理来说Box(title)应该在ul的下面,但是Box会因为浮动而跑去ul的同一行。为什么呢?浮动元素脱离文档流,子元素无法撑开父元素的高度,从而会影响后面的元素排版。

清除浮动

为了清除浮动带来的负面影响,以下有5中方法可供参考,常用的是第三种和第五种。

1、设置父元素的高度,给ul添加高度,让他不要塌陷。

2、父容器里添加空元素,并设置clear:both。给ul添加一个空盒子
,并给这个盒子设置属性clear:both

3、父容器里添加伪元素after,并设置content:"",clear:both,display: block;

css 复制代码
ul::after{
	/* 伪元素一定要加上content: ""否则无法生效;*/ 
	content: "";
        /*clear 只适用于块级元素*/
	clear: both;
	display:block;
}

4、给后面受影响的元素设置clear:both,给title添加

scss 复制代码
.title{
	clear:both;
}

5、把父容器设置成BFC容器,设置父元素为overflow:hidden

BFC容器

一个问题:父容器设置magin-top,子容器设置magin-top,父容器正常,按道理来说子容器会相对于父容器的顶部进行定位下来,但是子容器不会下来。另一种情况,父容器没有设置magin-top,子容器设置magin-top,父容器会下来,但是子容器不会相对于父容器的顶部进行定位,这就是magin重叠。magin重叠只发生在上下,左右不会重叠。为了解决这个问题,我们可以将一个容器设置BFC容器,这样就不会有magin重叠的问题了。

css 复制代码
<style>
        ul{
            /* 将一个容器设置成bfc容器 */
            overflow: hidden;
            margin-top: 100px;
            background-color: #eee;
        }
        li:first-child{
            margin: 30px;
            list-style: none;
        }
        li:last-child{
            margin: 30px;
            list-style: none;
        }
</style>
<body>
    <div class="box">
        <ul>
            <li style="width: 200px;height: 50px;background-color: red;">1</li>
            <li style="width: 200px;height: 50px;background-color: blue;">2</li>
        </ul>
    </div>
</body>

1、内部的Box会在垂直方向上一个接一个地放置。

2、bfc容器内部和外部的容器互相隔离,互不影响。----> 解决margin重叠问题

3、bfc容器内,在垂直方向上相邻元素margin会重叠。

4、bfc容器是会把浮动容器的高度计算在内。----> 解决高度塌陷问题 清除浮动

触发BFC容器

如何将一个容器设置成BFC容器呢?可以有以下方法。

  • 给容器设置overflow:hidden||auto||scroll||overlay;
  • 给父容器设置 float:left/right;
  • 给父容器设置 position:absolute;
  • 给父容器设置 display:inline-block||inline-xxxx;
  • 给父容器设置 display:table-cell||table-xxxx;
  • 给父容器设置 display:flex||inline-flex;

总结

浮动布局在面试中是非常常见的一道题目,浮动布局让一个Box脱离了文档流,可以实现文字环绕的效果,但是会带来负面影响,他会影响后续的布局,所以要清除浮动,我们有5种常见的方法。后面我们又聊到了BFC容器,主要是用来解决margin重叠问题,要清楚如何触发BFC容器。OK,今天我们就聊到这里,欢迎下次再见!

相关推荐
IT_陈寒13 分钟前
JavaScript性能飞跃:5个V8引擎优化技巧让你的代码提速300%
前端·人工智能·后端
艾小码24 分钟前
这份超全JavaScript函数指南让你从小白变大神
前端·javascript
骑士雄师24 分钟前
Java 泛型中级面试题及答案
java·开发语言·面试
reembarkation32 分钟前
vue 右键菜单的实现
前端·javascript·vue.js
00后程序员张3 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
gplitems1236 小时前
Consua WordPress Theme — Business Consulting Sites That Convert With Clarity
javascript
雾削木7 小时前
stm32解锁芯片
javascript·stm32·单片机·嵌入式硬件·gitee
2301_768350238 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
小周同学:9 小时前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf
Jabes.yang9 小时前
Java求职面试实战:从Spring Boot到微服务架构的技术探讨
java·数据库·spring boot·微服务·面试·消息队列·互联网大厂