CSS之样式属性float
那么废话不多说,让我们的主角闪亮登场,众所周知,样式属性float可以让元素产生“浮动”的效果,它可以左浮动,当然还可以右浮动以及不浮动。那么,现在问题来了,我们希望容器可以随qi'ne...
·
那么废话不多说,让我们的主角闪亮登场,众所周知,样式属性float可以让元素产生“浮动”的效果,它可以左浮动,当然还可以右浮动以及不浮动。那么,现在问题来了,我们希望容器可以随其内容长大,始终套住子元素,怎么办呢,那这里给大家介绍常用的三种方法:
1.让外层的DIV也浮动起来。
2.使用空层清除浮动。
3.给外层DIV添加样式overflow:hidden。
此处给大家推广一下,关于浮动的一些问题也可以在百度搜“高度塌陷”进行解决,请大家自行查阅,哈哈哈!!!
顺便这里给大家附带一个练习,此处请一边阅读一边实践哟~
代码块:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2</title>
<style>
ul{
list-style-type: none;
margin: 0px;
padding-inline-start: 0px;
margin-top: 30px;
}
#div2{
background-color: #e4f1fa;
height: 30px; width: 240px;
line-height: 30px;
margin-top: -20px;
}
#p1{
font-size: 18px;
text-indent: 2em;
color: #0f7cbf;
font-family: 微软雅黑;
}
#p1:hover{
text-decoration: underline;
}
span{
color: #666;
height: 20px;
text-indent: 1em;
margin-left: 10px;
font-size: 15px;
font-family: 'Times New Roman', Times, serif;
}
span:hover{
color: #F60;
text-decoration: underline;
}
</style>
</head>
<body>
<div style="background-color: #0f7cbf; height: 35px; width: 240px; line-height: 35px;">
<p style="font-size: 18px; text-indent: 1em; color: aliceblue; font-family: 微软雅黑;"><b>家用电器</b></p>
</div>
<div id="div2">
<p id="p1"><b>大家电</b></p>
<div style="width: 230px; line-height: 30px; margin-top: -20px;">
<ul>
<li>
<span>平板电视</span>
<span>洗衣机</span>
<span>冰箱</span>
</li>
<li>
<span>空调</span>
<span>烟机/灶具</span>
<span>热水器</span>
</li>
<li>
<span>冷柜/酒柜</span>
<span>消毒柜</span>
<span>家庭影院</span>
</li>
</ul>
</div>
</div>
<div id="div2" style="margin-top: 110px;">
<p id="p1"><b>生活电器</b></p>
<div style="width: 230px; line-height: 30px; margin-top: -20px;">
<ul>
<li>
<span>电风扇</span>
<span>净化器</span>
<span>吸尘器</span>
</li>
<li>
<span>净水设备</span>
<span>挂烫机</span>
<span>电话机</span>
</li>
</ul>
</div>
</div>
<div id="div2" style="margin-top: 80px;">
<p id="p1"><b>厨房电器</b></p>
<div style="width: 230px; line-height: 30px; margin-top: -20px;">
<ul>
<li>
<span>榨汁机</span>
<span>电压力锅</span>
<span>电饭煲</span>
</li>
<li>
<span>豆浆机</span>
<span>微波炉</span>
<span>电磁炉</span>
</li>
</ul>
</div>
</div>
<div id="div2" style="margin-top: 80px;">
<p id="p1"><b>五金家装</b></p>
<div style="width: 250px; line-height: 30px; margin-top: -20px;">
<ul>
<li>
<span>淋浴/水槽</span>
<span>电动工具</span>
<span>手动工具</span>
</li>
<li>
<span>仪器仪表</span>
<span>浴霸/排气</span>
<span>灯具</span>
</li>
</ul>
</div>
</div>
</body>
</html>
效果图:
更多推荐
已为社区贡献1条内容
所有评论(0)