清除浮动的三种方法


<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>清除浮动的三种方法title>
    <style type="text/css">
        .div3{
            background: blue;
            border: 1px solid gold;
        }
        .div3:after{
            clear: both;
            content: ".";
            height: 0;
            display: block;
            visibility: hidden;
        }
    style>
head>

<body>
    <div style="background: blue;border: 1px solid gold;">
        使用空标签清除浮动。增加了无意义的结构元素
        <div style="float: left; background:#cccccc; line-height:100px;">leftdiv>
        <div style="float: right; background:#cccccc; line-height:200px;">rightdiv>
        <div style="clear: both;">div>
    div>
    <div style="background: blue;border: 1px solid gold; overflow: hidden; zoom:1;">
        使用overflow属性。使用overflow的时候,可能会对页面表现带来影响。
        <div style="float: left; background:#cccccc; line-height:100px;">leftdiv>
        <div style="float: right; background:#cccccc; line-height:200px;">rightdiv>
    div>
    <div class="div3">
        使用after伪对象清除浮动。该方法只适用于非IE浏览器。
        <div style="float: left; background:#cccccc; line-height:100px;">leftdiv>
       <div style="float: right; background:#cccccc; line-height:200px;">rightdiv>
    div>
body>

html>

你可能感兴趣的:(Web)