float浮动
程序员文章站
2024-01-30 22:05:22
...
目录
// 普通流，即不设置元素的排列方式，块元素、行内元素按其最原本的排列方式展示
*** css浮动的基础知识 ***
*** float浮动的语法 ***
?? 使用浮动产生的问题 ？？ --- “高度塌陷”
*** 清除浮动 ***
//设置了float的元素 会影响其他相邻的元素，需要使用clear清除浮动，clear只会影响自身，不会对其他相邻元素造成影响
- 方法1：
- 方法2：
// 给父元素添加此元素 （推荐）
- 方法3：
（推荐）
案例分析：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nav_demo</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
.clearfix:after{
content:'.';
height:0;
display:block;
visibility: hidden;
clear:both;
}
.clearfix{
zoom:1;
}
.container{
width:1200px;
margin:0 auto;
}
.header{
width:1200px;
background:#ccc;
overflow: hidden;
zoom:1;
}
.header .logo{
width:200px;
height:80px;
float:left;
margin:0 40px;
}
.header .nav{
padding-right:40px;
float:right;
overflow: hidden;
zoom:1;
}
.header .nav li{
float:left;
margin-right:20px;
}
.header .nav li a{
padding:0 20px;
height:80px;
line-height:80px;
display:block;
font-family: '微软雅黑';
font-size:16px;
color:#333;
}
.header .nav li a:hover{
color:#fff;
}
.main, .footer{
font-size:22px;
color:#fff;
}
.main{
width:1200px;
overflow:hidden;
zoom:1;
}
.main .con{
width:1000px;
height:500px;
background:blue;
float:left;
}
.main .sidebar{
width:200px;
height:500px;
background:orange;
float:left;
}
.footer{
width:1200px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="header">
<div class="logo">
<a href="#"><img src="./img/logo.png"></a>
</div>
<ul class="nav">
<li><a href="#">免费课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">猿问</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
<div class="main">
<div class="con">content</div>
<div class="sidebar">sidebar</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实现列表横排展示</title>
<style type="text/css">
*{
margin：0；
padding：0；
}
.con{
width:1100px;
height:100px;
background-color:black;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -550px;
}
img{
height: 100px;
line-height: 100px;
text-align: center;
float: left;
}
ul{
list-style: none;
float: right;
margin-top: 0;
margin-right: 40px;
}
li{
display: inline-block;
height: 100px;
line-height: 100px;
text-align: center;
margin:0 20px;
color: white;
}
img:active{
transform: scale(2);
}
li:active{
color: red;
}
</style>
</head>
<body>
<div class="con">
<img src="img/img.png" />
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
</ul>
</div>
</body>
</html>