CSS ???(???)
???? ??????
float? ??????. CSS?? float? ??? ??? ?? ?? ???? ??? ?? ??? "?? ??" ?? "?? ???"?? ???? ????. ??? ? ??? ??? ?? ??? ??? ?????.
?? ??: HTML?? ?? ??? ??? ??? ??? ???? ?????.
?? ???? ???: ??? ???? ???? ??????.
?? ??/?? ???: ??? ??? ?? ??? ?? ?? ? ?? ?????? ??? ??? ?? ??? ?? ?? ?? ??? ??? ?? ??(?? ??)? ?? ??? ?? ?? ????? ????? ?????. ).
float ??:
?、?left: ??? ???? ?????.
② ???: ??? ????? ?????.
③ ??: ??????.
④ ??: ?? ??? float ??? ??????.
?: ???? ???
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實例</title>
<title>float屬性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
float:left;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
}
</style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>?: ????? ???
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實例</title>
<title>float屬性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
float:right;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
float:right;
}
</style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>??? ??? ??? ??
?? ?? ??? ??? ?? ???? ??? ??? ?? ?? ?? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實例</title>
<title>float屬性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
}
div
{
float:left;
}
</style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>clear float -clear
? ???? ??? ???? ? ?? ??? ??????. ?? ????? Clear? ?????. ???? .
clear ??? ??? ??? ??? ??? ??? ? ??? ?????.
