Далее на странице
Тег <br> используется для переноса строки. Располагается в том месте текста, где необходим перенос.
Тег <br> не добавляет пустой отступ перед строкой, в отличие от тега <p>.
Атрибут Clear
Атрибут clear тега br - сообщает браузеру как обрабатывать следующую строку, если текст обтекает плавающий элемент – изображение, к которому применен атрибут align или блок, к которому применяется свойство CSS float.
- left - отменяет обтекание плавающего элемента, расположенного слева.
- all – отменяет обтекание плавающего элемента, расположенного с любой стороны.
- right - отменяет обтекание плавающего элемента, расположенного справа.
- none - отменяет действие атрибута clear
<html>
<head>
<meta charset="utf-8">
<title> Тег br </title>
</head>
<body>
<p> 1. Меня тревожила судьба восемнадцати человек, скрывавшихся где то за горизонтом, в то время как на нас медленно надвигались черные громады туч. <img src="penguin.gif" align="right"> Но Волка Ларсена это, по видимому, не особенно беспокоило, хотя, когда мы вышли на палубу, я заметил, что у него слегка раздуваются ноздри и движения стали быстрее. Лицо его было сурово и жестко, но глаза – ясно голубые в тот день – как то особенно поблескивали. Меня поразило, что Ларсен был весел – свирепо весел, словно он радовался предстоящей борьбе, ликовал в предвкушении великой минуты, когда стихии обрушатся на него. </p>
<p> 2. Меня тревожила судьба восемнадцати человек, скрывавшихся где то за горизонтом, в то время как на нас медленно надвигались черные громады туч. <img src="penguin.gif" align="right"> <br> Но Волка Ларсена это, по видимому, не особенно беспокоило, хотя, когда мы вышли на палубу, я заметил, что у него слегка раздуваются ноздри и движения стали быстрее. Лицо его было сурово и жестко, но глаза – ясно голубые в тот день – как то особенно поблескивали. Меня поразило, что Ларсен был весел – свирепо весел, словно он радовался предстоящей борьбе, ликовал в предвкушении великой минуты, когда стихии обрушатся на него. </p>
<p> 3. Меня тревожила судьба восемнадцати человек, скрывавшихся где то за горизонтом, в то время как на нас медленно надвигались черные громады туч. <img src="penguin.gif" align="right"> <br clear="right"> Но Волка Ларсена это, по видимому, не особенно беспокоило, хотя, когда мы вышли на палубу, я заметил, что у него слегка раздуваются ноздри и движения стали быстрее. Лицо его было сурово и жестко, но глаза – ясно голубые в тот день – как то особенно поблескивали. Меня поразило, что Ларсен был весел – свирепо весел, словно он радовался предстоящей борьбе, ликовал в предвкушении великой минуты, когда стихии обрушатся на него. </p>
</body>
</html>
1. Меня тревожила судьба восемнадцати человек, скрывавшихся где то за горизонтом, в то время как на нас медленно надвигались черные громады туч. 
Но Волка Ларсена это, по видимому, не особенно беспокоило, хотя, когда мы вышли на палубу, я заметил, что у него слегка раздуваются ноздри и движения стали быстрее. Лицо его было сурово и жестко, но глаза – ясно голубые в тот день – как то особенно поблескивали.
2. Меня тревожила судьба восемнадцати человек, скрывавшихся где то за горизонтом, в то время как на нас медленно надвигались черные громады туч.
Но Волка Ларсена это, по видимому, не особенно беспокоило, хотя, когда мы вышли на палубу, я заметил, что у него слегка раздуваются ноздри и движения стали быстрее. Лицо его было сурово и жестко, но глаза – ясно голубые в тот день – как то особенно поблескивали.
3. Меня тревожила судьба восемнадцати человек, скрывавшихся где то за горизонтом, в то время как на нас медленно надвигались черные громады туч.
Но Волка Ларсена это, по видимому, не особенно беспокоило, хотя, когда мы вышли на палубу, я заметил, что у него слегка раздуваются ноздри и движения стали быстрее. Лицо его было сурово и жестко, но глаза – ясно голубые в тот день – как то особенно поблескивали.
Пояснение к примеру
Как видно из примера:
- в первом случае текст обтекает плавающий элемент (изображение пингвина, размещенное в правой части экрана) слева;
- во втором варианте мы производим перенос строки при помощи тега <br>, и текст также обтекает плавающий элемент слева.
- и в третьем варианте мы добавляем к тегу <br> атрибут clear="right", таким образом отменяя обтекание плавающего элемента (пингвина), расположенного справа, а текст, расположенный после тега <br>, смещается ниже пингвина.
