官方资料
鱼C课程案例库:https://ilovefishc.com/html5/
html5速查手册:https://man.ilovefishc.com/html5/
css速查手册:https://man.ilovefishc.com/css3/
学习正文
float:https://man.ilovefishc.com/pageCSS3/float.html
使用 float 定义元素浮动方向:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
p.left {
background-color: pink;
width: 50%;
float: left;
}
p.right {
background-color: lightblue;
width: 50%;
float: right;
}
</style>
</head>
<body>
<p class="left">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus tempore reiciendis vel. Amet culpa est animi delectus exercitationem tenetur nam debitis tempora eveniet, odit quibusdam veniam vitae dicta voluptatem fuga.</p>
<p class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, voluptatum? Ducimus debitis necessitatibus cum incidunt similique perspiciatis repudiandae. Perspiciatis, consequatur quo impedit nesciunt debitis enim accusantium saepe eos voluptatem blanditiis.</p>
</body>
</html>
image.png
float 对于文本和行内元素采取的是被环绕,对于块级元素采取的是覆盖。
float 会修改元素的显示样式:
image.png