<!--<ここからHTMLのコードです>〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜-->
<body>
<div class="clearfix"> <!-- ←ここ から横並びです。 -->
<div class="box-a">
A
</div>
<div class="box-b">
B
</div>
<div class="box-c">
C
</div>
</div> <!-- ←ここまでclearfixです 横並び -->
<div class="box-d">
D
</div>
<!--<ここまでHTMLのコードで〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜-->
<!--<ここからCSSのコードです>〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜-->
<style>
body{
margin: auto;
width: 900px;
}
.box-a {
background-color: green;
width: 900px;
height: 30px;
}
.box-b {
background-color: red;
width: 500px;
height: 180px;
float: left; /* ←左に配置 */
}
.box-c {
background-color: yellow;
width: 400px;
height: 180px;
float: right; /* ←右に配置 */
}
.box-d {
background-color: blue;
width: 900px;
height: 30px;
}
.clearfix:after { /* ここがfloatが範囲外に影響をブロックする！！ */
content: " ";
display: block;
clear: both;
}
</style>