css万能清除页面布局

CSS是前端开发中不可或缺的一部分。除了能够美化页面外，它还能通过清除页面布局规范化各类元素的样式，让开发变得更加简易。

/* --- 通用重置 --- */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- 清除浮动 --- */
.clearfix:before,
.clearfix:after{
    content:';
    display: table;
}

.clearfix:after{
    clear:both;
}

/* --- 禁止用户选中文字 --- */
.noselect{
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
}

/* --- 重置样式 --- */
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, form, fieldset, legend, input, textarea, button, select, table, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    font: inherit;
} 

上述代码可以清除常见的页面布局问题，比如清除浮动、各类样式重置、禁止用户选中文字等。

当然，这只是常行的清除布局方式。在实际的开发过程中，我们还需要根据页面内容调整理想的清除方案。

CSS的清除功能可谓是相当强大，只要掌握正确的清除方式，可以让页面布局变得更为简单易懂。希望本文对你有所帮助！