webbasic之如何消除浮动影响
Posted 野生猿
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webbasic之如何消除浮动影响相关的知识，希望对你有一定的参考价值。
1.如果最终不需要显示父元素的边框，只需要处理对p的影响：
p{
clear:left/right/both
}
以上可消除左浮动，右浮动，和两者都有时的影响，注意只能消除对叔叔辈的影响。
2.如果想消除对父元素的影响：
-在父元素内加一个空的块。
-在这个新块上clear
-原理？
因为新加进去的块没有浮动，依然占据流（此时新块也是没有高度的），对它clear会使它露出来（露出来的形式同p）
从而拉伸了流的高度，使得父元素有了高度
<body>
<div id="d0">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<!-- 消除浮动影响：消除浮动对父元素的影响 -->
<div style="clear:left;"></div>
</div>
<p>浮动时看看我</p>
</body>
3.实例：照片墙
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>照片墙</title>
<style>
/*先刷墙*/
body{
background-color:#088;//设置背景墙为湖蓝色
}
/*再摆照片*/
ul{
width:780px; //设置ul（流）的宽度等于3个li的宽度，摆第4个的时候会自动换行
margin:20px auto;
border:1px solid red;
/*去掉符号*/
list-style-type:none;
}
li{
width:218px;
padding:10px;
margin:10px;
border:1px solid #ccc;//将每个li的边框设置的灰色
float:left;//左浮动，实现照片的正序排列
background-color:#fff;//将每个li的背景色设置为白色
}//每一个li所占的宽度为：218+2*10+2*10+2*1=260
p{
text-align:center;//设置描述照片的文本居中
}
</style>
</head>
<body>
<ul>
<li>
<img src="../images/01.jpg"/>
<p>轻轻地我走了</p>
</li>
<li>
<img src="../images/02.jpg"/>
<p>正如我轻轻地来</p>
</li>
<li>
<img src="../images/03.jpg"/>
<p>我轻轻地招手</p>
</li>
<li>
<img src="../images/04.jpg"/>
<p>作别西天的云彩</p>
</li>
<li>
<img src="../images/05.jpg"/>
<p>那河畔的青柳</p>
</li>
<li>
<img src="../images/06.jpg"/>
<p>是夕阳中的新娘</p>
</li>
</ul>
为什么使用ul来做照片墙而不使用div?
用列表放相似的东西，它的渲染效率是最高的。
</body>
</html>
以上是关于webbasic之如何消除浮动影响的主要内容，如果未能解决你的问题，请参考以下文章