时间：2023-09-07 00:24:01 | 来源：网站运营
时间：2023-09-07 00:24:01 来源：网站运营
2018-7-26 css13-网页布局和浮动流：
在线咨询
float: left; 和父元素最左边对齐float: right; 和父元素最右边对齐注意点:<style> .box1{ float: left; width: 50px; height: 50px; background-color: red; } .box2{ float: left; width: 100px; height: 100px; background-color: pink; } .box3{ float: left; width: 150px; height: 150px; background-color: yellow; } </style>效果<style> .box1{ float: left; width: 50px; height: 50px; background-color: red; } .box2{ float: right; width: 100px; height: 100px; background-color: pink; } .box3{ float: left; width: 150px; height: 150px; background-color: yellow; } .box4{ float: right; width: 200px; height: 200px; background-color: tomato; } </style>效果<style> .box1{ float: left; width: 50px; height: 50px; background-color: red; } .box2{ width: 100px; height: 100px; background-color: pink; } .box3{ float: left; width: 150px; height: 150px; background-color: yellow; } .box4{ float: left; width: 200px; height: 200px; background-color: tomato; }</style>效果<div class="father"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div></div><head><meta charset="UTF-8"><title>CSS Example</title><style> div{ float: left; width: 50px; height: 50px; border: 1px solid #000; background-color: red } p{ width: 400px; height: 70px; background-color: yellow; }</style></head><body><h1 >六言诗·给彭德怀同志</h1><div></div><p > 山高路远坑深，</p><p > 大军纵横驰奔。</p><p > 谁敢横刀立马？</p><p > 唯我彭大将军。</p></body>效果<head> <meta charset="UTF-8"> <title>浮动元素高度问题</title> <style> *{ margin: 0; padding: 0; } div{ border: 1px solid #000; } p{ width: 50px; height: 50px; background-color: red; } </style></head><body><div> <p></p></div></body>效果，<p>标签把父元素<div>撑了起来p{ float: left; width: 50px; height: 50px; background-color: red; }效果，父元素<div>高度为0关键词：布局,浮动
