width:50%,margin:10px,padding:10pxと指定しています。横幅の合計が100%を超えておりfloatなら間違いなく崩れていますが、display:flexなら自動で幅調整し、絶対崩れません。 また、tableのtdと違い、marginを設定できます。 注意点としてdisplay:flexは横並べする親要素に指定します。 floatは子要素に指定するので異なる点です。 親要素にdisplay:flexを指定し、子要素にfloatを指定した場合、display:flexが優先されます。 古いブラウザではfloatで対応する、というときに使う方法です。 ※floatのためにしっかり横幅計算しないと古いブラウザでは崩れかねません。気をつけましょう。