网页中的浮动块链接操作

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>以防止它们重叠。

链接到工作的小提琴：https://jsfiddle.net/Baliga/96nye32c/4/