Почему первые три строки не отображаются?

Почему три элемента br не могут быть отображены?Почему первые три строки не отображаются?

#content1{ 
 
    float:left; 
 
    width:300px; 
 
    height:300px; 
 
    border:1px solid red; 
 
} 
 
#content2{ 
 
    width:300px; 
 
    height:700px; 
 
    border:1px solid green; 
 
}


 
    <div id="content1"> 
 
     <p>content1</p> 
 
    </div> 
 
    <div id="content2"> 
 
     <br/><br/><br/> 
 
     <p>content2</p> 
 
     <br/><br/><br/> 
 
     <p>content2</p> 
 
    </div>

Из HTML структуры, существует три структурных линий до Content2 и трех после Content2 структурных линий, только вторые три структурных линий могут быть отображены, поэтому могут быть отображены первые три структурными линии?

На мой взгляд, результат будет следующим.

В моем HTML сНа Content1 и сОн Content2 будет наложен друг с другом, поэтому первые три пустых строки будут затронуты плавающей DIV Content1?

Давайте добавим еще два примера, чтобы показать мое замешательство.

#content1{ 
 
    float:left; 
 
    width:300px; 
 
    height:300px; 
 
    border:1px solid red; 
 
} 
 
#content2{ 
 
    width:300px; 
 
    height:700px; 
 
    border:1px solid green; 
 
}


 
    <div id="content1"> 
 
     <p>content1</p> 
 
    </div> 
 
    <div id="content2"> 
 
     <p>haha</p> 
 
     <br/><br/><br/> 
 
     <p>content2</p> 
 
     <br/><br/><br/> 
 
     <p>content2</p> 
 
    </div>

Отображаемый эффект.

#content1{ 
 
    float:left; 
 
    width:300px; 
 
    height:300px; 
 
    border:1px solid red; 
 
} 
 
#content2{ 
 
    width:300px; 
 
    height:700px; 
 
    border:1px solid green; 
 
}


 
    <div id="content1"> 
 
     <p>content1</p> 
 
    </div> 
 
    <div id="content2"> 
 
     <br/><br/><br/> 
 
     <p>content2</p> 
 
     <br/><br/><br/> 
 
     <p>content2</p> 
 
    </div>

Отображаемый эффект.

HTML3 просто еще одну линию, чем htm4:

ха-ха

.
В html3 могут отображаться первые пустые строки, почему первые пустые строки ушли в html4?
Что такое reseaon за феноменом? Что съел мои первые пустые строки в html4?
Почему html4 не анализировался как следующее изображение?

источник

2016-03-08 it_is_a_literature

С помощью afelixj, я получил его. Мы можем добавить больше белых линий, например, 12
в тело html, чтобы наблюдать внешний вид css.

<html> 
<style type="text/css"> 
    #content1{ 
     float:left; 
     width:300px; 
     height:300px; 
     border:1px solid red; 
    } 
    #content2{ 
     width:300px; 
     height:700px; 
     border:5px solid green; 
    } 
</style> 
<body> 
    <div id="content1"> 
     <p>content1</p> 
    </div> 
    <div id="content2"> 
     <p style="margin:0px;border: 2px dashed green;"></p> 
     <br/><br/><br/> 
     <br/><br/><br/> 
     <br/><br/><br/> 
     <br/><br/><br/> 
     <br/><br/><br/> 
     <br/><br/><br/> 
     <p>content2</p> 
     <br/><br/><br/> 
     <p>content2</p> 
    </div> 
</body> 
</html>

источник

2016-03-09 09:39:46

Очистить второй ДИВ #content2.

#content1{ 
 
    float:left; 
 
    width:300px; 
 
    height:200px; 
 
    border:1px solid red; 
 
} 
 
#content2{ 
 
    width:300px; 
 
    height:700px; 
 
    border:1px solid green; 
 
    clear: both; 
 
}

<div id="content1"> 
 
    <p>content1</p> 
 
    </div> 
 
    <div id="content2"> 
 
    <br/><br/><br/> 
 
    <p>content2</p> 
 
    <br/><br/><br/> 
 
    <p>content2</p> 
 
    </div>

источник

2016-03-08 13:34:53

первый ДИВ сплавляется –

В моем HTML сНа Content1 и ДИВО Content2 будет наложено друг с другом, поэтому первые три пустых строки будут затронуты плавающей DIV Content1? –

не первые три разрыва строки, весь второй div зависит от плавающего div1 –

, потому что вы float ТРАЕКТОРИЙ #content1 вам нужно очистить #content2, или просто удалить float:left из #content1

#content1{ 
 
    width:300px; 
 
    height:300px; 
 
    border:1px solid red; 
 
} 
 
#content2{ 
 
    width:300px; 
 
    height:700px; 
 
    border:1px solid green; 
 
/* clear:both if you don't want to remove float left */ 
 
}

<div id="content1"> 
 
     <p>content1</p> 
 
    </div> 
 
    <div id="content2"> 
 
     <br/><br/><br/> 
 
     <p>content2</p> 
 
     <br/><br/><br/> 
 
     <p>content2</p> 
 
    </div>

источник

2016-03-08 13:36:33 dippas

В моем html div content1 и div content2 будут накладываться друг на друга, почему первые три пустые строки будут затронуты плавающим div content1? –

Это не отношения с очисткой float, я просто хочу знать, почему на первые три пустые строки будет влиять плавающий div content1, почему первые три пустые строки не будут отображаться? –

вам нужно больше узнать о float, затем – dippas

Я добавил пунктирную границу для нового тега p. Проверьте, где он начинается. Модель коробки начинается сверху, но контент «ха-ха» будет виден только после плавающей коробки.

Верхний интервал - это поле этого тэга.

Аналогичным образом разрывы строк на самом деле видны сверху. Поскольку разрывы строк не имеют никакого визуального контента, мы не замечаем их на выходе.

#content1{ 
 
    float:left; 
 
    width:300px; 
 
    height:300px; 
 
    border:1px solid red; 
 
} 
 
#content2{ 
 
    width:300px; 
 
    height:700px; 
 
    border:1px solid green; 
 
}


 
    <div id="content1"> 
 
     <p>content1</p> 
 
    </div> 
 
    <div id="content2"> 
 
     <p style="border: 2px dashed green;">haha</p> 
 
     <br/><br/><br/> 
 
     <p>content2</p> 
 
     <br/><br/><br/> 
 
     <p>content2</p> 
 
    </div>

источник

2016-03-09 05:26:06

Почему первые три строки не отображаются?

ответ

Смежные вопросы