floatの右

メニューなどで横並びにする時の「float」。
要素を「li」としたとき

<li class="list1">リスト１</li>
<li class="list2">リスト２</li>

とすると

li .list1{ float:left;}

でも"list2"は"list1"の右に並ぶ。

ただしこのとき、ブラウザの要素の調査を見ると"list2"の幅は親要素いっぱいになっていて、「マージン」や「パディング」等が効かない。

そこで、"list2"にも

li .list1{ float:left;}

li .list2{ float:left;}

とすると前の項目の"list1"の右側から"liset2"要素が始まり、「マージン」等のプロパティが有効になる。


　追記　2017/08/22

Deamwerver CC2017で再度検証してみたところ、list2にfloatをかけなくてもライブモードでmargin-leftが効いた。
Win7上ではCrome、Firefox、IE、Opera、Sleipnirすべてで問題なくマージンを読んでいた。
マージンが効かなかったのは
li .list1{ float:left;}
"li" と ".list2"の間にスペースが入っていたからかもしれない。
ただ、".list1"の前にスペースがあったら同様に書式ミスで"list2"は回り込まないので、他に原因があるのかもしれない。