css - 响应式网格布局中清除浮动的一个问题

问题描述

问 题

<div class="wrapper">
    <div class="outer col-md-4 col-sm-6">
        <div class="inner"></div>
    </div>
    <div class="outer col-md-4 col-sm-6">
        <div class="inner"></div>
    </div>
    <div class="outer col-md-4 col-sm-12">
        <div class="inner"></div>
    </div>
    <div class="outer col-md-3 col-sm-3">
        <div class="inner"></div>
    </div>
    <div class="outer col-md-6 col-sm-6">
        <div class="inner"></div>
    </div>
    <div class="outer col-md-3 col-sm-3">
        <div class="inner"></div>
    </div>
    <div class="outer col-md-1 col-sm-2">
        <div class="inner"></div>
    </div>
    <div class="outer col-md-1 col-sm-2">
        <div class="inner"></div>
    </div>
    <div class="outer col-md-2 col-sm-8">
        <div class="inner"></div>
    </div>
    <div class="outer col-md-2 col-sm-3">
        <div class="inner"></div>
    </div>
    <div class="outer col-md-6 col-sm-3">
        <div class="inner"></div>
    </div>
</div>

html, body {
  margin: 0;
  padding: 0; }

.wrapper {
  box-sizing: border-box;
  width: 100%;
  padding: 10px; }

.wrapper:before, .wrapper:after {
  content: "";
  display: table;
  clear: both; }

请问伪元素选择器那里的目的是什么？

解决方案

伪元素在这里是模拟一个真实元素, 让其两侧不允许有浮动元素, 从而实现清除浮动.

这篇关于css - 响应式网格布局中清除浮动的一个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！