方法一:最外层加上<div class="a" style=overflow:hidden;/* 同级元素有浮动,父级元素清除浮动*/
方法二:在最后面加<div class="b" style="clean:both">
方法三:在css中写样式
.clear::after{
content:' ';
display:block;
clear:both;
}里层有浮动外层就要清除浮动
img元素里加上浮动,就会与文字占一行
.aa{
display: block;/* 块级元素显示div */
display: inline;/* 内联元素显示,可以改成行内元素,行内元素是无法显示宽和高的 */
display: inline-block;/* 行内块元素,可以在一行内写,也可以设置宽和高*/
display: flex;/* 弹性盒子,当元素的宽度超过预定的宽度时自动改成合适的宽度 ,平均分配*/
display: none;/* 元素隐藏 */
}
{内容不跟随滚动天动而动
position:fixed;
top:0;
left:0;
}
css写出的下拉列表(定位)
position:static(默认,没有定位);fixed(绝对定位,相对浏览器)
relative(相对定位,相对正常位置,在原先在的位置上);absolute(绝对定位,相对不是static的父级元素定位,只要写absolute就在他的父级上加上relative)
fixed和absolute是不占据空间的,fixed不设置top,是相对于原来位置显示
top: left: right: bottom:
有定位的时候才能用,position的fixed,absolute,relative三个值可以用//
悬浮可以用来写导航条的下拉列表
<ul>
<li class="pr">技术文章
<div class="down1">
<ul>
<li>头条</li>
<li>新闻</li>
</ul>
</div>
</li>
</ul>
.down1{
position: absolute;
border: rgb(34,246,19) 1px solid;
background-color: #00FFFF;
top: 40px;
display: none;//隐藏
}
.pr{
position: relative;
height: 40px;
line-height: 40px;
}
.pr:hover .down1{
display: block;/* 鼠标移入pr时会显示down1菜单 */
}