CSS浮动

CSS浮动

在最初,浮动是用来实现文字环绕图片效果的,现在浮动是主流的页面布局方式之一。

1. 属性

属性名 作用
float
设置浮动
left : 设置左浮动
right : 设置右浮动
none :不浮动,默认值
clear
清除浮动
left :清除前面左浮动的影响
right :清除前面右浮动的影响
both :清除前面左右浮动的影响

2. 浮动练习一

用浮动实现以下效果,可以用左浮动实现。

CSS浮动_第1张图片

代码演示:

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>

你可能感兴趣的:(CSS,css,前端)