css3清除浮动的方式有哪些

这篇文章主要介绍“css3清除浮动的方式有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“cs免费云主机、域名s3清除浮动的方式有哪些”文章能帮助大家解决问题。 方式：1、在一个空的div标签中设置“clear:both”样式来清除浮动；2、给父级元素添加了一个“:after”伪元素，通过清除伪元素的浮动来清除浮动；3、给父元素设置overflow样式，属性值不为visible都可以清除浮动。本教程操作环境：windows10系统、CSS3&&HTML5版本、Dell G3电脑。浮动（float）可以控制浮动框左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”：上图中父元素撑开的高度是padding带来的效果，父元素没有设置高度。在父元素没有设置高度的情况下：如果父元素里的子元素没有设置浮动，那么父元素的高也会自动被撑开的，出现高度值；如果父元素里的子元素设置了浮动，那么父元素的高就不会自动被撑开的，也就没有高度值。显然这样设置浮动后出现了一些问题，比如：父元素的margin受到影响，无法实现上下左右居中，若没有给父元素设置高度，浮动后父元素的高度没有被撑开，那么父元素就不会在显示屏上显示。（1）使用clear:both清除浮动在代码中在放一个空的div标签，然后给这个标签设置clear:both来清除浮动对页面的影响。它的优点是简单，方便兼容性好，但是一般情况下不建议使用该方法，因为会造成结构混乱，不利于后期维护（2）利用伪元素:after来清除浮动给父级元素添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的（3）使用CSS的overflow属性当给父元素设置了overflow样式，不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了，它的本质就是建构了一个BFC，这样使得达到撑起父元素高度的效果关于“css3清除浮动的方式有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注云技术行业资讯频道，小编每天都会为大家更新不同的知识点。

相关推荐: JavaScript中cookie操作对象的应用方法有哪些

本篇内容主要讲解“JavaScript中cookie操作对象的应用方法有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript中cookie操作对象的应用方法有哪些”吧!Cookie 为 Web 应…