JSFiddle - React, Tailwind, and code Playground

by zicai

HTML

<!--浮动元素内容宽度超出容器的宽度 在ie6下回把容器撑开 -->
<div class="fl">
    sdfsfsdffsdfasdfsadfasfds
</div>

<div class="clear">
    
<!-- 更复杂的实例 -->
<div class="wrap">
    <div class="left">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div class="right">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>

CSS

.wrap {
    width: 400px;
    height: 40px;
    background-color:red;
}
.left {
    float:left;
    width: 200px;
    height: 30px;
    background-color:yellow;
}
.right {
    float:left;
    width: 200px;
    height: 30px;
    background-color:#c1c1c1;
}
.fl{
    float:left;
    width: 50px;
    background-color:pink;
}
.clear{
    clear:both;height: 20px;display:block;
}