CSS浮动
CSS浮动
在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。
1. 属性
| 属性名 | 作用 |
|---|---|
| float 设置浮动 |
left : 设置左浮动 right : 设置右浮动 none ：不浮动，默认值 |
| clear 清除浮动 |
left ：清除前面左浮动的影响 right ：清除前面右浮动的影响 both ：清除前面左右浮动的影响 |
2. 浮动练习一
用浮动实现以下效果，可以用左浮动实现。
代码演示：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>浮动练习1title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* 多次出现60px 将60px变为变量引用 */
:root {
--common-height: 60px;
}
.wrapper {
margin: auto;
width: 60%;
height: var(--common-height);
background-color: #ffd5d9;
border-radius: 4px;
}
.menu-item {
width: 100px;
height: 100%;
color: #fff;
text-align: center;
line-height: var(--common-height);
cursor: pointer;
/* float让菜单排列为一行 */
float: left;
}
.menu-item:hover {
background-color: #ff2995;
}
style>
head>
<body>
<div class="wrapper">
<div class="menu-item">手机div>
<div class="menu-item">平板div>
<div class="menu-item">电脑div>
div>
body>
html>
3. 浮动练习二
用浮动实现以下网页的顶部导航。
代码演示：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>浮动练习2title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.wrapper {
width: 100vw;
height: 100vh;
/* 放一张自己喜欢的照片 */
background-image: url(./banner.jpg);
background-size: cover;
padding: 0px 200px;
color: blue;
}
.logo {
margin: 20px;
color: aliceblue;
float: left;
}
.menu {
margin: 20px;
color: rgb(231, 238, 251);
float: right;
}
/* 解决li竖排的问题，使用float */
.menu > li {
margin: 0 20px;
float: left;
cursor: pointer;
}
.menu > li:hover {
color: blue;
/* 设置文字样式 */
text-decoration: underline;
}
style>
head>
<body>
<div class="wrapper">
<div class="logo">LOGOdiv>
<ul class="menu">
<li>首页li>
<li>关于li>
<li>我的li>
<li>联系li>
ul>
div>
body>
html>