目录
float属性
float：left
float：left-例2
float：left-例3
float:right;
对比father p{clear:right;}
例1
例2
.father .clear{...}
position属性
div position
例1
例2
position:absolute;
例1
例2：position:absolute
display：inline/block/none
float属性
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>float属性</title><style type="text/css">body{margin:15px;font-family:Arial; font-size:12px;}.father{background-color:#ffff99;border:1px solid #111111;padding:5px;}.father div{padding:10px;margin:15px;border:1px dashed #111111;background-color:#90baff;}.father p{border:1px dashed #111111;background-color:#ff90ba;}.son1{/* 这里设置son1的浮动方式*/}.son2{/* 这里设置son1的浮动方式*/}.son3{/* 这里设置son1的浮动方式*/}</style></head><body><div class="father"><div class="son1">Box-1</div><div class="son2">Box-2</div><div class="son3">Box-3</div><p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p></div></body></html>
float：left
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>float属性</title><style type="text/css">body{margin:15px;font-family:Arial; font-size:12px;}.father{background-color:#ffff99;border:1px solid #111111;padding:5px;}.father div{padding:10px;margin:15px;border:1px dashed #111111;background-color:#90baff;}.father p{border:1px dashed #111111;background-color:#ff90ba;}.son1{/* 这里设置son1的浮动方式*/float:left;}.son2{/* 这里设置son1的浮动方式*/}.son3{/* 这里设置son1的浮动方式*/}</style></head><body><div class="father"><div class="son1">Box-1</div><div class="son2">Box-2</div><div class="son3">Box-3</div><p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p></div></body></html>
float：left-例2
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>float属性</title><style type="text/css">body{margin:15px;font-family:Arial; font-size:12px;}.father{background-color:#ffff99;border:1px solid #111111;padding:5px;}.father div{padding:10px;margin:15px;border:1px dashed #111111;background-color:#90baff;}.father p{border:1px dashed #111111;background-color:#ff90ba;}.son1{/* 这里设置son1的浮动方式*/float:left;}.son2{/* 这里设置son1的浮动方式*/float:left;}.son3{/* 这里设置son1的浮动方式*/}</style></head><body><div class="father"><div class="son1">Box-1</div><div class="son2">Box-2</div><div class="son3">Box-3</div><p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p></div></body></html>
float：left-例3
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>float属性</title><style type="text/css">body{margin:15px;font-family:Arial; font-size:12px;}.father{background-color:#ffff99;border:1px solid #111111;padding:5px;}.father div{padding:10px;margin:15px;border:1px dashed #111111;background-color:#90baff;}.father p{border:1px dashed #111111;background-color:#ff90ba;}.son1{/* 这里设置son1的浮动方式*/float:left;}.son2{/* 这里设置son1的浮动方式*/float:left;}.son3{/* 这里设置son1的浮动方式*/float:left;}</style></head><body><div class="father"><div class="son1">Box-1</div><div class="son2">Box-2</div><div class="son3">Box-3</div><p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p></div></body></html>
float:right;
.son1{/* 这里设置son1的浮动方式*/float:left;}.son2{/* 这里设置son1的浮动方式*/float:left;}.son3{/* 这里设置son1的浮动方式*/float:right;}
对比father p{clear:right;}
例1
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>float属性</title><style type="text/css">body{margin:15px;font-family:Arial; font-size:12px;}.father{background-color:#ffff99;border:1px solid #111111;padding:5px;}.father div{padding:10px;margin:15px;border:1px dashed #111111;background-color:#90baff;}.father p{border:1px dashed #111111;background-color:#ff90ba;}.son1{/* 这里设置son1的浮动方式*/float:left;}.son3{/* 这里设置son3 的浮动方式*/float:left;}.son2 {/* 这里设置son2 的浮动方式*/float:right;}</style></head><body><div class="father"><div class="son1">Box-1</div><div class="son2">Box-2</div><div class="son3">Box-3</div><p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p></div></body></html>
例2
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>float属性</title><style type="text/css">body{margin:15px;font-family:Arial; font-size:12px;}.father{background-color:#ffff99;border:1px solid #111111;padding:5px;}.father div{padding:10px;margin:15px;border:1px dashed #111111;background-color:#90baff;}.father p{border:1px dashed #111111;background-color:#ff90ba;clear:right;}.son1{/* 这里设置son1的浮动方式*/float:left;}.son3{/* 这里设置son3 的浮动方式*/float:right;}.son2 {/* 这里设置son2 的浮动方式*/float:left;}</style></head><body><div class="father"><div class="son1">Box-1</div><div class="son2">Box-2</div><div class="son3">Box-3<br/>Box-3<br/>Box-3<br/>Box-3<br/></div><p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p></div></body></html>
.father .clear{...}
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>float属性</title><style type="text/css">body{margin:15px;font-family:Arial; font-size:12px;}.father{background-color:#ffff99;border:1px solid #111111;padding:5px;}.father div{padding:10px;margin:15px;border:1px dashed #111111;background-color:#90baff;}.father p{border:1px dashed #111111;background-color:#ff90ba;clear:right;}.son1{float:left;/* 这里设置son1的浮动方式*/}.son2{/* 这里设置son1的浮动方式*/float:left;}.son3{/* 这里设置son1的浮动方式*/float:right;}.father .clear{margin:0;padding:0;border:0;clear:both;}</style></head><body><div class="father"><div class="son1">Box-1</div><div class="son2">Box-2</div><div class="son3">Box-3<br />Box-3<br />Box-3<br />Box-3</div><div class="clear"></div></div></body></html>
position属性
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>position属性</title><style type="text/css">body{margin:20px;font :Arial 12px;}#father{background-color:#a0c8ff;border:1px dashed #000000;padding:15px;}#block1{background-color:#fff0ac;border:1px dashed #000000;padding:10px;}</style></head><body><div id="father"><div id="block1">Box-1</div></div></body></html>
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>position属性</title><style type="text/css">body{margin:20px;font :Arial 12px;}#father{background-color:#a0c8ff;border:1px dashed #000000;padding:15px;}#block1{background-color:#fff0ac;border:1px dashed #000000;padding:10px;position:relative;/* relative相对定位 */left:30px;top:30px;}</style></head><body><div id="father"><div id="block1">Box-1</div></div></body></html>
div position
例1
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Language" content="zh-cn" /><title>position属性</title><style type="text/css"><!--body{margin:20px;font-family:Arial;font-size:12px;}#father{background-color:#a0c8ff;border:1px dashed #000000;padding:15px;}#father div{background-color:#fff0ac;border:1px dashed #000000;padding:10px;}#block1{}#block2{}--></style></head><body><div id="father"><div id="block1">Box-1</div><div id="block2">Box-2</div></div></body></html>
例2
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Language" content="zh-cn" /><title>position属性</title><style type="text/css"><!--body{margin:20px;font-family:Arial;font-size:12px;}#father{background-color:#a0c8ff;border:1px dashed #000000;padding:15px;}#father div{background-color:#fff0ac;border:1px dashed #000000;padding:10px;}#block1{position:relative;bottom:30px;right:30px;}#block2{position:relative;top:30px;left:30px;}--></style></head><body><div id="father"><div id="block1">Box-1</div><div id="block2">Box-2</div></div></body></html>
position:absolute;
例1
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>absolute属性</title><style type="text/css">body{margin:20px;font-family:Arial;font-size:12px;}#father{background-color:#a0c8ff;border:1px dashed #000000;padding:15px;}#father div{background-color:#fff0ac;border:1px dashed #000000;padding:10px;}#block2{}</style></head><body><div id="father"><div >Box-1</div><div id="block2">Box-2</div><div >Box-3</div></div></body></html>
例2：position:absolute
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>absolute属性</title><style type="text/css">body{margin:20px;font-family:Arial;font-size:12px;}#father{background-color:#a0c8ff;border:1px dashed #000000;padding:15px;position:relative;}#father div{background-color:#fff0ac;border:1px dashed #000000;padding:10px;}#block2{position:absolute;top:0px;right:0px;}</style></head><body><div id="father"><div >Box-1</div><div id="block2">Box-2</div><div >Box-3</div></div></body></html>
display：inline/block/none
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>display属性</title></head><body><div style="display:inline">Box-1</div><div style="display:inline">Box-2</div><div style="display:inline">Box-3</div><span style="display:block">Box-4</span><span style="display:block">Box-5</span><span style="display:block">Box-6</span><div style="display:none">Box-7</div><span style="display:none">Box-8</span></body></html>
