css如何清除浮动（二）

2019独角兽企业重金招聘Python工程师标准>>>

在上篇介绍通过设置祖先元素的高度类清除浮动，但在实际的网站开发中，很少会设置元素的高度，那这是为什么呢？

是因为元素一般都能被内容撑高，所以不需要设置高度。

那能不能不写height，也把浮动清除了呢？也让浮动之间，互不影响呢？

还是同样的例子，通过对div2设置clear: both;来清除浮动，clear就是清除的意思，both就是全部的意思，包括左浮动和右浮动。这里对li设置左浮动，是div2会紧追在div1后面，就需要对div2清除浮动。

<!DOCTYPE html>

<head>

<title>Document</title>

margin: 0;

padding: 0;

}

li{

float: left;

text-align: center;

background-color: red;

width: 90px;

height: 40px;

list-style: none;

margin-left: 10px;

}

/*第2个div设置clear：both*/

.div2{

clear: both;

margin-top: 10px;

}

</style>

</head>

<body>

<div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</body>

</html>

运行结果：

由运行结果，我们可以看出div2清除了浮动，但是对div2设置的margin-top: 10px;失效了。同样对div1设置margin-bottom也是失效的，本质原因div没高。这也是使用clear属性清除浮动的一个弊端。

转载于:https://my.oschina.net/u/2971691/blog/877133

css如何清除浮动（二）相关推荐

CSS——如何清除浮动
众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...
CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div ...
CSS基础-清除浮动-李南江
配套视频下载地址清除浮动盒子高度问题在标准流中内容的高度可以撑起盒子的高度 <style>div{background-color: red;}p{width: 200px;heig ...
【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )
文章目录一.清除浮动 - 使用 after 伪元素 ( 最流行写法 ) 1.额外标签法和 overflow 样式法弊端 2.after 伪元素清除浮动简介 3.after 伪元素清除浮动核心代码 ...
CSS为何清除浮动以及清除浮动方法总结
文章目录一,浮动布局的注意点二,为什么需要清除浮动? 三,清除浮动的本质四,清除浮动的方法 1. 额外标签法(隔墙法) 2.父元素overflow 3.after伪元素清除 4.双伪元素清除浮动 ...
关于CSS样式清除浮动的总结
浮动的元素之间是互相贴靠的.但是在实际的工作中,我们是希望同组的元素互相贴靠的,但是不同组的元素之间是不互相贴靠的.第二组的元素不应该与第一组的元素有任何互相的影响. 比如,我们想要的效果是这样的: ...
html清除js设置的浮动,css 怎么清除浮动
而此段时间最烦的是森林群里面的一群人每天上班都在吵,然后我就每次都装嫩的在里面问:"各位高手,劳烦请问一下:清除浮动怎么弄?" 清除浮动一个凡是做页面的人都会遇到的一个东西,但是是 ...
清除浮动最有效的css写法,清除浮动最有效的css写法
说起来呢,基本上只要你给容器div加了float的属性,就需要清除浮动来使页面显示正常,那么,到底有什么方法可以让浮动轻松清除呢? 可以用display:flex;替代,但是它对IE8,9支持不是很好 ...
CSS中清除浮动的代码
.clearfix:after {content: "\0020";display: block;height: 0;clear: both; }.clearfix {zoom: ...

css如何清除浮动（二）

css如何清除浮动（二）相关推荐

最新文章

热门文章