カラム落ちを利用する際の注意点 CSS

CSS　カラム落ちを利用するときに気を付ける事

高さを揃える事。

じゃないと、段組崩れちゃいます。

以下は、box1~3をdivで囲い、

box3をwidth100％にしてカラム落ちで段組みした例。

こうするとdivが一つ少なくて済む

@charset "UTF-8";

body{
margin: 0;
}
.box1, .box2, .box3,.box4{
background: lightpink;
border: solid 5px crimson;
box-sizing: border-box;
}

.boxA:after{
content: "";
display: block;
clear: both;
}

.box1,.box2{
float: left;
width: 50%;
}

.box3{
float: left;
width: 100%;
}