console 命令行工具 X clear

console

   window.onload = function() {
        var oContent = document.getElementById("content");
        var oImg1 = document.getElementById("img1");
        var oContent1 = document.getElementById("content1");
        var oImg2 = document.getElementById("img2");
        var oContent2 = document.getElementById("content2");
        var oEmoji = document.getElementById("emo");
        var oText1 = document.getElementById("text1");
        var oSend = document.getElementById("send");
        var bl = true;
        oEmoji.onclick = function() {
            if (bl) {
                oEmoji.src = "./img/pool.png"
                bl = false;
            } else {
                oEmoji.src = "./img/rich.png"
                bl = true;
            }
        }
        oSend.onclick = function() {
            if (bl) {
                oImg1.src = "./img/rich.png";
                oContent1.innerHTML = oText1.value;
                oContent.innerHTML = oImage1.outerHTML + oContent1.innerHTML + '<br / >' + oContent.innerHTML;
            } else {
                oImg2.src = "./img/pool.png";
                oContent2.innerHTML = oText1.value;
                oContent.innerHTML = oContent2.innerHTML + oImage2.outerHTML + '<br / >' + oContent.innerHTML + '<br / >';
            }

        }

    }

<body>
    <div id="outter">
        <div id="inner">
            <div class="top">
                <div id="content"></div>
                <div id="item1" class="clear">
                    <div id="image1">
                        <img id="img1" src="" alt="">
                    </div>
                    <div id="content1"></div>
                </div>
                <div id="item2" class="clear">
                    <div id="image2">
                        <img id="img2" src="" alt="">
                    </div>
                    <div id="content2"></div>
                </div>
            </div>
            <div id="bottom" class="clear">
                <div id="emoji">
                    <img id="emo" src="./img/rich.png" alt="">
                </div>
                <input id="text1" type="text">
                <button id="send">发送</button>
            </div>
        </div>
    </div>
</body>

     span {
            display: inline-block;
        }
        
        #outter {
            width: 250px;
            height: 520px;
            border: 1px solid #000;
            border-radius: 10px;
        }
        
        #inner {
            width: 204px;
            height: 370px;
            border: 3px solid #000;
            margin: 70px 20px 0;
            position: relative;
        }
        
        .top {
            width: 204px;
            height: 318px;
            overflow: auto;
            word-break: break-all;
        }
        
        #item1 {
            margin-top: 10px;
            width: 204px;
            line-height: 30px;
            color: white;
        }
        
        #image1 {
            width: 31px;
            height: 31px;
            border-radius: 10px;
            float: left;
        }
        
        #content1 {
            max-width: 140px;
            border-radius: 10px;
            float: left;
            padding: 0 10px;
            background: #f18c16;
            margin-left: 5px;
        }
        
        #item2 {
            margin-top: 10px;
            width: 204px;
            line-height: 30px;
            color: #000;
        }
        
        #image2 {
            width: 31px;
            height: 31px;
            border-radius: 10px;
            float: right;
        }
        
        #content2 {
            max-width: 140px;
            border-radius: 10px;
            float: right;
            padding: 0 10px;
            background: green;
            margin-right: 5px;
        }
        
        #bottom {
            width: 204px;
            height: 50px;
            border: 1px solid #000;
            position: absolute;
            bottom: 0px;
            left: 0px;
            font-size: 0;
        }
        
        #emoji {
            width: 31px;
            height: 31px;
            border: 1px solid #000;
            border-radius: 10px;
            margin: 7px 2px 7px 2px;
            float: left;
            text-align: center
        }
        
        #emoji img {
            margin-top: 2px;
        }
        
        #text1 {
            width: 120px;
            height: 28px;
            border: 1px solid #000;
            border-radius: 10px;
            margin: 10px 0;
            float: left;
        }
        
        #send {
            width: 40px;
            height: 28px;
            border: 1px solid #000;
            border-radius: 10px;
            margin: 10px 0;
            font-size: 12px;
            position: absolute;
            right: 3px;
        }
        
        .clear::after {
            display: block;
            content: '';
            clear: both;
            height: 0;
        }
        
        .clear {
            zoom: 1;
        }