Can the span element be used to clear floats?

using the span element clear:both doesn"t seem to work. Please explain how it works. Thank you.

Code address: http://jsfiddle.net/6dtg2qcr/2/

html,body{
                width: 100%;
                height: 100%;
                margin: 0;
            }
            .wrapper {
                width: 400px;
                margin: 40px auto 0 auto;
                border: 1px solid -sharpcdcdcd;
            }
            .div-base{
                width: 200px;
                height: 100px;
                border: 1px solid blue;
                text-align: center;
                margin-bottom: 10px;
            }
            .div1{
                /* position: relative; */
                /* right: 10px; */
            }
            .div2{
                float: left;
            }
            .div3{
                border: 1px solid red;
                background: red;
                float: left;
            }
            .clearfix {
                clear: both;
            }
Css
Mar.21,2021

.clearfix {

display: block;
clear: both;

}
to use block elements.


you can clearly float the parent element's tag as needed: after {
display:block;
clear: both;
}


to use the block-level element display:block. This article is very good. You can take a closer look at link description

.
Menu