Понедельник, 09 Июля 2012 15:11

Убираем обтекание элемента при помощи clear

Written by 
Оцени эту запись
(2 Голоса)

Когда в верстке макета присутствуют плавающие элементы со свойством float, все последующие элементы html-страницы их обтекают. Если для кого-то из них свойство обтекания необходимо убрать, нужно использовать css-свойство clear.

 

Для того, чтобы определенному элементу убрать обтекание, нужно использовать clear.

Свойство clear может принимать следующие значения:

 

  • none - ничего не убирает
  • left - убирает обтекание слева
  • right - убирает обтекание справа
  • both - совмещает left и right

 

 

К примеру, есть картинка, которую обтекает текст:

 

Для начала, нужно подключить на html-страницу библиотеку jQuery:

 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

 

Теперь мы можем эту библиотеку использовать. 

 

Мы можем обращаться к отдельным элементам по тегам. Например, зададим некоторую функцию, которая будет выполняться при клике на любую ссылку

 

 

 

<p><img alt="" src="/images/stories/clear.jpg" style="float:left" /></p>
<p>Для начала, нужно подключить на html-страницу библиотеку jQuery:</p>
<p>&nbsp;</p>
<p>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;</p>
<p>&nbsp;</p>
<p>Теперь мы можем эту библиотеку использовать.&nbsp;</p>
<p>&nbsp;</p>
<p>Мы можем обращаться к отдельным элементам по тегам. Например, зададим некоторую функцию, которая будет выполняться при клике на любую ссылку</p>

 

 

 

В нашем примере уберем обтекание для последнего абзаца:

 

Для начала, нужно подключить на html-страницу библиотеку jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Теперь мы можем эту библиотеку использовать. 

 

Мы можем обращаться к отдельным элементам по тегам. Например, зададим некоторую функцию, которая будет выполняться при клике на любую ссылку

 

<p style="clear: left">Мы можем обращаться к отдельным элементам по тегам. Например, зададим некоторую функцию, которая будет выполняться при клике на любую ссылку</p>

 

Для того, чтобы убрать результат float для всего текста, нужно применить clear для первого абзаца:

 

 

Для начала, нужно подключить на html-страницу библиотеку jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Теперь мы можем эту библиотеку использовать. 

Мы можем обращаться к отдельным элементам по тегам. Например, зададим некоторую функцию, которая будет выполняться при клике на любую ссылку

 

 

 

<p><img alt="" src="/images/stories/clear.jpg" style="float:left" /></p>
<p style="clear: left">Для начала, нужно подключить на html-страницу библиотеку jQuery:</p>
<p>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;</p>
<p>Теперь мы можем эту библиотеку использовать.&nbsp;</p>
<p>Мы можем обращаться к отдельным элементам по тегам. Например, зададим некоторую функцию, которая будет выполняться при клике на любую ссылку</p>
 
 
Убираем обтекание для блоков:
 
 
 
 
 
 
У каждого из блоков, содержащих картинку стоит свойство float:left. Если нам нужно поставить их не по 4, а по 2 в строке, третьем нужно задать clear:left:
 
 
 
 
<div class="imgs_cont">
<div class="imgs_cont_child">
<img src="http://kate-land.net/media/demos/demos/images/cat3.jpg" /></div>
<div class="imgs_cont_child">
<img src="http://kate-land.net/media/demos/demos/images/cat3.jpg" /></div>
<div class="imgs_cont_child" style="clear: left;">
<img src="http://kate-land.net/media/demos/demos/images/cat3.jpg" /></div>
<div class="imgs_cont_child">
<img src="http://kate-land.net/media/demos/demos/images/cat3.jpg" /></div>
</div>
 
 
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов