标梵详解CSS去除浮动的方法

作为一名前端的开发者，都会有一段让人喜欢的书写代码的方式。以前，小D刚开始接触网站程序设计与制作这个课程时，每当要让一个div向左移动或者向右移动，左对齐或者右对齐，小D都特别喜欢使用float:left或者float:right。以至于当时无法自拔，深爱浮动（float）样式。

但是，这个float真的那么香吗？后面，小D吃了float的小亏，以至于寻找到方法誓要将它除掉。

首先，我们先来介绍什么是浮动？

float属性指定一个盒子（元素）是否应该浮动,其设置就是允许你将普通流钟的元素在它的包含元素内尽可能地向左或向右排列。

首先，我们新建文件，用简单的代码进行演示：

<body><div class="float"><img src="https://hbimg.huabanimg.com/e03ca907eaf70ab4667f7d3bd0df897482a876312acd4-SOsqYW_fw658/format/webp" alt=""></div><div class="background"></div>
</body>

CSS如下所示：

<style>body{margin: 0;width: 100vw;height: 100vh;}.float{width: 300px;height: 300px;float: left;}.float img{width: 100%;}.background{width: 400px;height: 300px;background: lightcoral;}
</style>

接着，我们会出先这样的样式：

这样的话，我们可以看出，样式类为background被图片遮住了300像素，那么我们假如想要让它不被遮住的话，就需要在background加上float;

.background{width: 400px;height: 300px;background: lightcoral;float: left;
}

这时我们会得到一个这样的页面：

那么，为什么要清除浮动呢？难道是有什么弊端？

背景不能显示

由于浮动产生，如果对父级设置了（CSS background 背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
边框不能撑开

如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
margin/padding值不能正确显示

由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

那么，有时候我们不想要这个浮动，那么我们应该怎么除去浮动呢？

方法一：clear:both

假如我们用下面的代码，要让类名为next的放进图片的下面，那么这时写进代码中会中，区块会因为兄弟元素的浮动属性影响，从而导致next块在图片下方。

注：此时为了方便区分，红色块用了float:right
所以，此时我们可以应用clear:both实现效果，代码如下：

<body><div class="content"><div class="float"><img src="https://hbimg.huabanimg.com/e03ca907eaf70ab4667f7d3bd0df897482a876312acd4-SOsqYW_fw658/format/webp" alt=""></div><div class="background"></div><div class="clear"></div><div class="next"></div></div>
</body>

然后再给类clear加样式，CSS代码如下：

.clear{clear: both;
}

注：这样的方法并不是很好，因为页面添加了一个无任何意义的标签。

方法二：给父级添加::after或者::befter伪类，父级加上zoom:1

第二种方法就是在添加便签的基础上，优化的代码：

<body><div class="content"><div class="float"><img src="https://hbimg.huabanimg.com/e03ca907eaf70ab4667f7d3bd0df897482a876312acd4-SOsqYW_fw658/format/webp" alt=""></div><div class="background"></div></div><div class="next"></div>
</body>

CSS代码如下：

<style>body{margin: 0;}.content{zoom: 1;}.float{width: 300px;height: 300px;float: left;}.float img{width: 100%;}.background{width: 400px;height: 300px;background: lightcoral;float:right;}.content::after{content:'';display: block;clear: both;height: 0px;}.next{width: 100vw;height: 300px;background: sandybrown;}
</style>

方法三:在父级元素添加overflow：hidden(不推荐)

理由：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。

清除浮动应该注意以下几点：

clear:both是清除左右浮动，当clear的属性值为left,则清除左浮动，反之，则右浮动;
清除浮动的常用方法是以上三种，可根据需求进行选择。

这样一个简单的浮动float就去除啦！小编会在后面继续发布与CSS相关开发的经验，希望你能够在后期继续关注和支持我们的文章。

标梵详解CSS去除浮动的方法相关推荐

html右侧浮动菜单,HTML+CSS：css元素浮动详解，使用浮动制作导航栏菜单
原标题:HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单今天这篇文章我们来说一下css的浮动属性(float),给块状元素添加float属性可以使其转变为行内元素,也就是我们所说标签对象 ...
inline-block是html5,详解CSS display:inline-block的应用
本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解. 基础知识 display:inline- ...
详解CSS display:inline-block的应用（转）
详解CSS display:inline-block的应用阅读目录基础知识 inline-block的问题 inline-block的应用总结本文详细描述了display:inline-blo ...
float属性html,详解CSS样式中的float属性
详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的fl ...
详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范一般来说,页面中的每一个元素都会形成一个矩形盒子,渲染引擎根据给定的样式确定这个盒子的呈现.通俗的来说,页面的布局就是一个个盒子的排列和摆放.掌握了盒子呈现的本质,布局也就轻而易举. 在 ...
详解CSS float属性
转自:http://luopq.com/2015/11/08/CSS-float/ \详解CSS float属性 Posted on 2015-11-08 | In CSS | 5条评 ...
html css 距离顶部距离,详解CSS line-height和height
最近在做CSS界面时经常遇到line-height和height这两个属性,一直没搞很明白,今天静下心来好好网上查阅了一下,算是有所领悟.https://blog.csdn.net/a20131263 ...
html nthchild作用,详解CSS中:nth-child的用法
前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nt ...
详解css中的em单位
文章目录详解CSS中的em单位解释 Examp-01 源码 Example-02 源码: 详解CSS中的em单位 css中的长度单位有很多,可谓五花八门,而下面本篇文章就来给大家介绍一下em单位. ...

标梵详解CSS去除浮动的方法

标梵详解CSS去除浮动的方法相关推荐

最新文章

热门文章