html - 网页中的 float block 链接操作

Question

我有一个网页，左栏中有一些链接在网页的右侧有一些我想并排在我的左栏中的文字

但是当我这样做时，它会创建一个不可见的框，阻止左栏的链接部分，不允许我选择任何链接 当我删除导致这种情况发生的行代码时

然后我的网页右侧从左栏的末尾开始

我怎样才能做到这一点？

这是我的代码

/* fonts */
    @font-face {
        font-family: BYekan;
        src: url("fonts/BYekan.eot") format('eot'),
        url("fonts/BYekan.woff") format('woff'),
        url("fonts/BYekan.ttf") format('truetype');
    
    }
    
    /* general styles */
    body {
        background: #f2f2f2 url("bg1.png") fixed;
        font-family: sans-serif;
    }
    
    a {
        text-decoration: none;
        color: #008cc6;
    }
    
    a:hover {
        color: #aaaaaa;
    }
    
    h1, h2, h3, h4, h5 {
        font-family: Georgia, serif;
    }
    
    img {
        border: 0;
        max-width: 100%;
    }
    
    .clear {
        clear: both;
    }
    
    /* main container */
    #main {
        width: 960px;
        margin: 0 auto 0 auto;
        background-color: #fff;
        border: 1px solid #dddddd;
        border-radius: 3px;
        padding: 10px;
        box-shadow: -2px -2px 3px #ddd;
    }
    
    /* header */
    #header {
        position: relative;
    }
    
    #header hgroup {
        top: 0;
        left: 0;
        position: absolute;
    }
    
    #header hgroup h1, #header hgroup h2 {
        background-color: #ffffff;
        margin: 0;
    }
    
    #header hgroup h1 {
        font-size: 28px;
    }
    
    #header hgroup h1 a {
        color: #0099ff;
    }
    
    #header hgroup h2 {
        font-size: 14px;
        color: #00ccff;
    }
    
    #header nav {
        float: right;
        direction: rtl;
        font-family: BYekan, serif;
    }
    
    #header nav ul {
        margin: 0;
        padding: 0;
    }
    
    #header nav ul li {
        display: inline-block;
        margin-left: 7px;
        text-align: center;
    }
    
    #header nav ul li a {
        background-color: #f9f9f9;
        border: 1px solid #e7eff4;
        padding: 2px 20px;
        height: 100%;
        display: inline-block;
        border-radius: 3px;
    }
    
    #header nav ul li a:hover {
        background-color: #fff;
        border: 1px solid #dee1e4;
    }
    
    #header nav ul li a.current {
        background-color: #5ba6d6;
        border: #6ea4c7;
        color: #fff;
    }
    
    #header nav ul li a.current:hover{
        background-color: #fff;
        border: #4cb0f9;
        color: #9c95ef;
    }
    /* row2 and slider */
    .row2 {
        margin-top: 30px;
    }
    
    .row2 #slider img {
        border-radius: 3px;
    }
    
    .row2 #slider img:hover {
        opacity: 0.5;
    }
    
    /* sidebar */
    .row2 #left-column {
        float: left;
        width: 30%;
        box-sizing: initial;
    }
    
    #left-column nav ul li{
        list-style-image: url("list_orange.gif");
    }
    
    #left-column nav ul li:hover{
        list-style-image: url("list_black.gif");
    }
    
    #left-column nav ul li a{
        vertical-align: -3px;
    }
    
    #left-column h2.title:before{
        content: "::";
    }
    
    #left-column address {
        margin: 20px;
    }
    
    /* content */
    .row2 #content {
        float: right;
        width: 68%;
        box-sizing: border-box;
    }
    
    .row2 #content article{
        border-bottom:1px dashed #ddd;
        padding-bottom: 10px;
        position: relative;
    }
    
    .row2 #content article:last-child{
        border-bottom: 0 !important;
    }
    
    .row2 #content article time{
        right: 0;
        top: 0;
        position: absolute;
        background-color: #dbe7f2;
        padding: 3px 5px;
        display: inline-block;
        border-radius: 3px;
        font-size: 10px;
    }
    
    .row2 #content article footer{
        text-align: right;
    }
    
    .row2 #content article footer a{
        color: #fff;
        background-color: #d265c8;
        font-size: 12px;
        padding: 4px 10px;
        margin-right: 10px;
        border-radius: 3px 10px 10px 3px;
        transition: background-color 1s;
    }
    
    .row2 #content article footer a:hover{
        background-color: #e8e9e7;
    }
    
    /* footer */
    .row3{
        text-align: center;
        margin-top: 20px;
        border-top: #eee;
        padding-top: 10px;
        font-size: 11px;
        position: relative;
    }
    
    .row3 footer#foot p{
        padding: 0;
        margin: 0;
    }
    
    .row3 img.goUp{
        position: absolute;
        right: 0;
        bottom: 0;
    }
    
    .row3 img.goUp:hover{
        opacity: 0.5;
    }

<!DOCTYPE HTML>  
    <html><head>
    <meta charset="utf-8">
    <title>
        template
    </title>
    <link rel="stylesheet" href="./test.css" type="text/css">
    <link rel="shortcut icon" href="IMG_20180522_235723.jpg" type="image/x-icon">
    </head>
    <body>
    <div id="main">
    <div class="wrapper row1">
        <header id="header" class="clear">
            <hgroup>
                <h1><a href="#">7learn.com</a></h1>
                <h2>online web design and programing courses</h2>
            </hgroup>
            <nav>
                <ul>
                    <li><a href="#" class="current">خانه</a></li>
                    <li><a href="#"></span>خدمات </a></li>
                    <li><a href="#">درباره ی ما</a></li>
                    <li><a href="#">تماس با ما</a></li>
                    <li><a href="#">دسته بندی</a></li>
                </ul>
            </nav>
        </header>
    </div>
    <!--content-->
    <div class="clear"></div>
    <div class="wrapper row2">
        <div class="clear" id="container">
            <!--slider-->
            <section id="slider">
                <a href="#"><img src="like.jpg" alt="image"></a>
            </section>
            <!--sidebar-->
            <aside id="left-column">
                <h2 class="title">categories</h2>
                <nav>
                    <ul>
                        <li><a href="http://www.7learn.com">web design classes</a></li>
                        <li><a href="http://www.7learn.com">html & css</a></li>
                        <li><a href="https://www.w3schools.com">Visit W3Schools.com!</a></li>
                        <li><a href="https://www.7learn.com">secure link one</a></li>
                        <li><a href="https://www.7learn.com">secure link two</a></li>
                        <li><a href="http://www.7learn.com">php course</a></li>
                    </ul>
                </nav>
                <h2 class="title">categories</h2>
                <h2 class="title">get in contact</h2>
                <section class="last">
                    <address>
                        logman<br>
                        shiraz<br>
                        tel:xxxx xxx xxxx<br>
                        email:<a href="#">contact@domain.com</a>
                    </address>
                </section>
            </aside>
            <!--main content-->
            <div id="content">
                <article>
                    <time>12 may 2014</time>
                    <h2>post title number one</h2>
                    <p>Easy Account Manager is programmed by BlackDove.
                        <a href="http://www.7learn.com/">7learn.com</a></p>
                    <p> Easy Account Manager is a solution for importing, exporting and backing up your entire Call of
                        Duty:
                        Modern Warfare 2 multiplayer playing statistics, including unlocks, custom weapon
                        configurations,
                        emblems, challenges, and more! Easy Account Manager is a game enhancement utility</p>
                    <footer class="more"><a href="#" target="_blank">read more...</a></footer>

                </article>

                <article>
                    <time>07 march 2014</time>
                    <h2>post title number two</h2>
                    <p>Easy Account Manager is programmed by BlackDove.
                    </p><a href="http://www.7learn.com"></a>
                    <table>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                    </table>
                    <p> Easy Account Manager is a solution for importing, exporting and backing up your entire Call of
                        Duty:
                        Modern Warfare 2 multiplayer playing statistics, including unlocks, custom weapon
                        configurations,
                        emblems, challenges, and more! Easy Account Manager is a game enhancement utility</p>
                    <footer class="more"><a href="#" target="_blank">read more...</a></footer>

                </article>

                <article>
                    <time>23 nowamber 2013</time>
                    <h2>post title number three</h2>
                    <p>Easy Account Manager is programmed by BlackDove.
                    </p><a href="http://www.7learn.com"></a>
                    <p> Easy Account Manager is a solution for importing, exporting and backing up your entire Call of
                        Duty:
                        Modern Warfare 2 multiplayer playing statistics, including unlocks, custom weapon
                        configurations,
                        emblems, challenges, and more! Easy Account Manager is a game enhancement utility</p>
                    <footer class="more"><a href="#" target="_blank">read more...</a></footer>

                </article>
            </div>
        </div>

        <!--footer-->
        <div class="wrapper row3">
            <footer id="foot" class="clear"></footer>
            <p class="f1_left">copyright &copy; 2015 - all rights reserved -<a href="#">7learn.com</a></p>
            <p class="f1_right">template by<a href="http://wwww.7learn.com/" title="web design learning">7lear.com</a></p>
            <a href="#top"><img class="goUp" src="up.png"></a>
        </div>
        <div>
</body>
</html>

Answer 1

原因

UI重叠的原因是div关闭不当。 div 相互嵌套。 (.row2 和 .row3)

修复

单独的 div .row2和 .row3 , 同时添加 <div class="clear"></div>在它们之间以防止它们重叠。

工作 fiddle 的链接:https://jsfiddle.net/Baliga/96nye32c/4/